jQuery nyroModal 插件遇到问题
nyroModal
//页面加载完成后初始化 设置大小
$(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 插件遇到问题的更多相关文章
- 30个Jquery灯箱插件
jQuery 是非常流行的JS框架,其俨然已成了开发者的必备工具,其中的jQuery Lightbox插件更是为广大开发者所喜爱.它惊人的特征之一是jQuery Lightbox插件有很多变化. 下面 ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
- 推荐15款响应式的 jQuery Lightbox 插件
利用现代 Web 技术,网络变得越来越轻巧与.模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去.在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计 ...
- Chocolat.js – 响应式的 jQuery Lightbox 插件
Chocolat.js 使您能够显示一个或多个图像在同一页面上.给用户展示一组图片缩略图,可以显示全页或块.Chocolat.js 可以很好地处理所有主要的浏览器.它在下面这些浏览器测试通过:IE7+ ...
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
随机推荐
- servletConfig的使用案例
servletConfig参数的使用案例 首先,建立Dynamic Web Project ,同样命名FirstServlet,然后建立Servlet:Login.java,包名为cc.openhom ...
- LINUX漏洞-安全防护--防火墙相关
漏洞扫描 https://blog.csdn.net/e_Inch_Photo/article/details/79072360 基本安全防范: https://blog.csdn.net/holmo ...
- jquery在元素中存储数据:data()
转自:http://www.php.cn/js-tutorial-405445.html 在元素中存储数据:data() 1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html& ...
- Eclipse 中yml自动提示功能相关设置
转自:https://blog.csdn.net/lililuni/article/details/82849376
- IOS CFBundleIdentifier
CFBundleIdentifier CFBundleIdentifier 必须是com.12306.aaa 这样的格式吗 AppID 用通配符格式的AppID方便. AppSt ...
- eclipse 创建注释模板
使用 Alt+Shift+J 可以快速注释. 我们每次手动敲入作者,时间,版本等信息,有一些重复,可通过设置eclipse注释模板,减少工作量. Window -> preference -& ...
- ios tableview header 透明
当将tableview的style属性设为grouped时,header或footer会变成透明,如果设为plain,header或footer会保持默认颜色
- python的线上环境配置
1.安装python 2.7 http://www.cnblogs.com/strikebone/p/3970512.html 2.安装相关前置工具 pip, Django http://www ...
- mysql 数据备份及数据迁移
一.使用mysql数据导出进行备份时,会备份整个表的数据,有时候只想备份一部分数据,这个时候可以使用如下方法: 1. 使用insert into 和 select结合: insert into tal ...
- ubuntu 16.04 install wine
from: https://wiki.winehq.org/Ubuntu If your system is 64 bit, enable 32 bit architecture (if you ha ...