jQuery nyroModal 插件遇到问题

时间：2024-11-30 09:04:14

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，但一般使用者会忽略这些，而是依赖搜索引擎得到很多不全面的答案。

相关文章