jQuery事件绑定on()与弹窗实现代码

2024-04-14 13:29:10

页面上经常会有弹窗，有的弹窗是动态生成的，有的弹窗是在页面底部隐藏的，对于动态生成的弹窗，如果要监听弹窗的事件，可以使用jQuery的事件绑定on()方法实现。

如图，弹窗是js动态生成的，通过点击某个链接弹出，弹窗中的“立即去使用”链接点击后，实现的效果是关闭弹窗，并跳转到锚点。

这个a标签是：

代码如下:

<a style="display:" title="立即去使用" target="_blank" gid="167" href="http://act.vip.***.com/vip/2016/51dps/#gamelist" class="co_vip tdu ">立即去使用</a>

我们要监听弹窗里面的click事件，但这个弹窗本身是动态生成的，因此我们要监听body，通过on()事件绑定，当动态生成这个弹窗时，可以监听到click方法：

function jump_to_anchor() {
  $("body").on("click", "span[name='msgbox_info'] a, .act-pop-table a", function (e) {
    link = $(this).attr('href');
    if (link == 'http://act.vip.***.com/vip/2016/51dps/#gamelist') {
      e.preventDefault();
      msgExit();
      window.location.href = link;
    }
  });
}

这里实际上是绑定了两个a标签的事件绑定，都是当这个链接是某个url，阻止默认行为，并调用关闭弹窗方法，跳转到该链接，也就是锚点。

一款基于jQuery的图片场景标注提示弹窗特效

今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: 复制代码代码如下: <div class="container"
jQuery探测位置的提示弹窗(toolTip box)详细解析

这里我用jQuery做了个提示弹窗的js,并做了个小demo,简单总结下: 方位根据当前鼠标所处的位置不同,箭头所指向的方向也不同: 左上方(left-top)(缺省).左下方(left-bottom).右上方(right-top).右下方(right-bottom).上左方(top-left).上右方(top-right).下左方(bottom-left).下右方(bottom-right) 优先级以上各种情况优先级依次降低探测思路探测基本思路是: 首先,也是前提条件,判断容器的高或宽
jquery ui dialog实现弹窗特效的思路及代码

今天我们用jquery ui dialog来做一个弹窗特效.我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的...实现这一切,只要以下代码: 我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery ui,我们做弹窗就是这么简单...当然了,大家可以看到,我还有一个插入数据的功能,这个功能,我采用了jquery 的appendto: 我先通过变量获取值,接着建了
jquery模拟alert的弹窗插件

演示地址: http://runjs.cn/detail/miwszbne 分享说明: 第N次造轮子了,只为最简单的调用,jquery模拟alert和confirm的弹窗插件调用方法: $.alert('your message'); $.alert('your message',function(){ $.alert('click ok button') }); $.confirm('your message'); $.confirm('your message',function(resu
jQuery绑定事件on()与弹窗的简要概述

页面上经常会有弹窗,有的弹窗是动态生成的,有的弹窗是在页面底部隐藏的,对于动态生成的弹窗,如果要监听弹窗的事件,可以使用jQuery的事件绑定on()方法实现. 如图,弹窗是js动态生成的,通过点击某个链接弹出,弹窗中的"立即去使用"链接点击后,实现的效果是关闭弹窗,并跳转到锚点. 这个a标签是: <astyle="display:" title="立即去使用" target="_blank" gid="167
jQuery弹簧插件编写基础之“又见弹窗”

本文将通过一个实例来引出jQuery插件开发中的一些细节,首先介绍下jQuery插件开发的一些基础知识. jQuery的插件开发主要分为两类: 1. 类级别,即在jQuery类本身上扩展方法,类似与 $.ajax,$.get 等. 2. 对象级别,这里所谓的对象是指通过jQuery选择器选中的jQuery对象,在该对象上添加方法.例如:$('div').css(), $('div').show() 等. 在实际开发中,我们通常选用对象级别的方法来开发插件,jQuery强大的选择器及对象操作是我们
jquery弹窗插件colorbox绑定动态生成元素的方法

colorbox是jquery一个非常好用的弹窗插件,功能十分丰富,使用体验也很好. colorbox官网:http://www.jacklmoore.com/colorbox/ 刚才在是用colorbox的时候遇到了一个问题,这个问题以前没有注意过. 以前我都是讲这个插件使用在静态HTML元素中的,今天为动态生成的元素绑定的时候发现不能用了. 常规的用法是这样的: 复制代码代码如下: <a class="test" href="test.jpg" titl
Jquery实现自定义弹窗示例

在项目开发中,如果我们使用javascript自带的提示对话框,感觉不怎么美观,所以我们通常都是自己定义一些对话框,这里我实现点击按钮就弹窗一个登录的窗口,点击该窗口并可以实现拖拽功能,太多文字的东西说不清楚,直接用代码说话. 这里我将HTML.CSS.Jquery代码分别贴出来 HTML部分: 复制代码代码如下: <button id="show" class="alter">弹窗</button>
jquery实现弹窗功能（窗口居中显示）

效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出确认框始终位于窗口的中间位置的测试</title> <style type="text/css"> .mask { posit
jquery制作弹窗提示窗口代码分享

复制代码代码如下: <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><s

jQuery事件绑定on()与弹窗实现代码

相关推荐

随机推荐