nyroModal

ver 1.6.2 弹出层插件 浏览更多
 
初始化大小问题
//页面加载完成后初始化 设置大小
$(function() {
$.nyroModalSettings({ width: $(window).width(), height: $(window).height(), modal: true })
});

多 nyroModal 弹出层自定义大小

前面解决了默认大小设置问题,但针对所有弹出层此设置都是有效的,当一个页面有多个弹出层,而且彼此大小不一致时,该如何解决?

在标签的 nyroModal 事件响应之后,再调整生成的 html 样式,原因:

在标签上绑定一个事件,nyroModal 插件初始化时会合并事件,并且用户绑定的事件会先执行, 如 <a class="nyroModal" href="#content" click="before()">link</a>,

会先执行 before 再弹出层,因此可以先设置内容,再弹出层(此方式也可解决 nyroModal 回调事件中有 ajax 请求时,弹出了错误层,但 ajax 没返回结果问题,先 ajax 获取内容,再弹出层)

// before 方法,先 load 内容,再执行以下代码,为什么 setTimeout 呢?
// 如果不这样,就会立即执行,而 nyroModal 层却没有生成,因此 setTimeout 真是天赐良方
setTimeout(function(){
$( '.nyroModalContent').width(200);
$( '.nyroModalWrapper').width(200);
}, 100);

关闭层回调方法,如刷新页面;但一旦设置就针对整个页面,所以研究了根据不同情景,选择不同响应的实现

一个页面中有多种 nyroModal 层,有 div 和 iframe 两种; div 关闭时不需刷新页面,iframe 关闭时要刷新页面; 如果 endRemove 回调刷新,那么无论 div 还是 iframe 都会刷新;

因此需要动态判断,通过回调参数选择响应方式,如下代码:

此处通过 class 值进行判断

 $('.nyroModal').nyroModal({
endRemove: function(obj, settings) {
// settings.type : div , iframe
// settings.selector : div中#xxx, iframe中none
// settings.selector : div中none, iframe中url
try {
var selector = $(settings.selector);
if (selector.length != 0 && selector.attr("class").indexOf("non-refresh") != -1) return;
} catch(e) {} window.location.href = window.location.href;
}
});

js 动态添加的标签绑定 nyroModal 事件

大家都很熟悉,一般这些插件的初始化,比如 DatePicker (下文会讲到),都是通过一个 css 选择器,然后在 document.ready 中绑定事件。但对于那些通过 js 动态操作 DOM 加入的标签,该如何绑定这些事件呢?相信大家都有遇到过。以 table 中添加一行为例,其中 tr 中有如下 html :

<a class="nyroModal" href="#content">link</> <div id="content">content</div>

其实,实现方式也很简单,获得插入的 tr 行 dom 对象,然后执行下面代码即可:

 $(".nyroModal", tr).nyroModal(); 

总结

关于 nyroModal 插件遇到的问题就记录到此,后续有问题再做更新。

解决这些问题,关键是要认真读取官方的 Document 和 Examples,但一般使用者会忽略这些,而是依赖搜索引擎得到很多不全面的答案。

jQuery nyroModal 插件遇到问题的更多相关文章

  1. 30个Jquery灯箱插件

    jQuery 是非常流行的JS框架,其俨然已成了开发者的必备工具,其中的jQuery Lightbox插件更是为广大开发者所喜爱.它惊人的特征之一是jQuery Lightbox插件有很多变化. 下面 ...

  2. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  3. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  4. 使用jQuery.form插件,实现完美的表单异步提交

    传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...

  5. 为jQuery写插件

    很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...

  6. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  7. 推荐15款响应式的 jQuery Lightbox 插件

    利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...

  8. Chocolat.js – 响应式的 jQuery Lightbox 插件

    Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...

  9. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

随机推荐

  1. servletConfig的使用案例

    servletConfig参数的使用案例 首先,建立Dynamic Web Project ,同样命名FirstServlet,然后建立Servlet:Login.java,包名为cc.openhom ...

  2. LINUX漏洞-安全防护--防火墙相关

    漏洞扫描 https://blog.csdn.net/e_Inch_Photo/article/details/79072360 基本安全防范: https://blog.csdn.net/holmo ...

  3. jquery在元素中存储数据:data()

    转自:http://www.php.cn/js-tutorial-405445.html 在元素中存储数据:data() 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html& ...

  4. Eclipse 中yml自动提示功能相关设置

    转自:https://blog.csdn.net/lililuni/article/details/82849376

  5. IOS CFBundleIdentifier

    CFBundleIdentifier  CFBundleIdentifier 必须是com.12306.aaa 这样的格式吗       AppID   用通配符格式的AppID方便.   AppSt ...

  6. eclipse 创建注释模板

    使用  Alt+Shift+J 可以快速注释. 我们每次手动敲入作者,时间,版本等信息,有一些重复,可通过设置eclipse注释模板,减少工作量. Window -> preference -& ...

  7. ios tableview header 透明

    当将tableview的style属性设为grouped时,header或footer会变成透明,如果设为plain,header或footer会保持默认颜色

  8. python的线上环境配置

    1.安装python 2.7   http://www.cnblogs.com/strikebone/p/3970512.html 2.安装相关前置工具  pip, Django http://www ...

  9. mysql 数据备份及数据迁移

    一.使用mysql数据导出进行备份时,会备份整个表的数据,有时候只想备份一部分数据,这个时候可以使用如下方法: 1. 使用insert into 和 select结合: insert into tal ...

  10. ubuntu 16.04 install wine

    from: https://wiki.winehq.org/Ubuntu If your system is 64 bit, enable 32 bit architecture (if you ha ...