nyroModal
//页面加载完成后初始化 设置大小 $(function() { $.nyroModalSettings({ $(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 对象,然后执行下面代码即可:
1 $(".nyroModal", tr).nyroModal();
总结
关于 nyroModal 插件遇到的问题就记录到此,后续有问题再做更新。
解决这些问题,关键是要认真读取官方的 Document 和 Examples,但一般使用者会忽略这些,而是依赖搜索引擎得到很多不全面的答案。