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. 从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效。

    # 69.0 之后的版本 ## 从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效.关闭Enable Ephemeral Flash Permissions , ...

  2. MySQL数据库作发布系统的存储,一天五万条以上的增量,预计运维三年,怎么优化?

    优化应该不仅仅是数据库方面使用高性能的服务器多使用缓存页面服务器.数据库服务器.图片服务器.上传下载服务器分离数据库集群,表分割(水平分割和垂直分割)和表散列负载均衡重视每个代码开发细节,特别是大循环 ...

  3. linux时间

    1.查看时间:date Thu Mar  2 13:22:54 UTC 2017 2.查看时区:date -R Thu, 02 Mar 2017 13:23:32 +0000 3.Linux时间戳:d ...

  4. requireJS-初识

    浅谈requireJS 2016-04-26 21:44 by 猴子猿, 726 阅读, 0 评论, 收藏, 编辑 项目中大都使用模块化开发,requireJS作为AMD模块开发的典范,所以有必要学习 ...

  5. js中怎么写自执行函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. org.springframework.stereotype 注解

    org.springframework.stereotype 1.@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访 ...

  7. springmvc处理url请求步骤

    处理步骤: 1.调用DispatcherServlet的doService方法 2.进入DispatchServlet的doDispatch方法 3.进入DispatchServlet的getHand ...

  8. auto semicolon insertion 自动分号补齐的坑

    今天发现js自动分号补齐的坑,来看如下两段代码: function Hello(){ return { name: ’JavaScript’ }; } alert(Hello()); //输出unde ...

  9. redis安装和命令使用

    前言: redis是一个key-value的存储系统,value支持string.list.set.zset.hash五种类型,且支持数据的本地存储   一.安装redis 前提:linux下需要安装 ...

  10. 第五章 二叉树(a)树