当前位置: 首页 > 工具软件 > nyroModal > 使用案例 >

jQuery nyroModal 插件遇到问题

姚俊材
2023-12-01

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 对象,然后执行下面代码即可:

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

 

总结

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

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

 

转载于:https://www.cnblogs.com/ranmofang/p/3753353.html

 类似资料: