官网地址:http://nyromodal.nyrodev.com/

调用方法很简单,首先是把对应的库引用进来(<!--[if IE 6]> 部分是为了兼容IE6)

<linkrel="stylesheet"href="styles/nyroModal.css"type="text/css"media="screen"/><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><scripttype="text/javascript"src="js/jquery.nyroModal.custom.js"></script><!--[if IE 6]>    <script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script><![endif]-->

再调用如下方法:

$(function() {  $('.nyroModal').nyroModal();});

之后,只需要为链接加上class="nyroModal"即可(手动的调用除外)

Ajax 调用。

<ahref="http://nyromodal.nyrodev.com/demoSent.php"class="nyroModal">Ajax</a>

Ajax调用并支持抽取指定内容。
如果只需要显示页面上某一个元素,那么只需要在请求时把该元素ID号做为锚点加入请求地址中去。如只显示指定ID的内容

<ahref="http://nyromodal.nyrodev.com/demoSent.php#UserInfo"class="nyroModal">Ajax</a>

则只显示demoSent.php里ID号为UserInfo的元素;如果UserInfo不存在,则显示所有内容。
调用图片也很简单

<ahref="http://nyromodal.nyrodev.com/img/img2.jpg"class="nyroModal"title="3rd Street Promenade">Image</a>

更多的例子,可以查看官网,使用起来都是非常简单方便的。

Form提交(返回结果显示在对话框内)

Form提交并过抽取定内容(用法同Ajax)

同样,我们只需要为form元素添加class="nyroModal"属性;如果需要在IFrame的方式,那就指定target="_blank"属性;如果需要抽取部分内容显示,就指定提交目标页面的元素的ID号为锚点。

Form提交(返回结果将显示在弹出的对话框内)

<formmethod="post"action="http://nyromodal.nyrodev.com/demoSent.php"class="nyroModal"><inputtype="text"name="wouhou"/><inputtype="submit"value="simple form"/></form>

如果需要在IFrame的方式,那就指定target="_blank"属性;

<formmethod="post"action="http://nyromodal.nyrodev.com/demoSent.php"class="nyroModal"target="_blank"><inputtype="text"name="wouhou"/><inputtype="submit"value="simple form in iframe"/></form>

Form提交并过抽取定内容(用法同Ajax)我们只需要为form元素添加class="nyroModal"属性;如果需要抽取部分内容显示,就指定提交目标页面的元素的ID号为锚点。<formmethod="post"action="http://nyromodal.nyrodev.com/demoSent.php#test"class="nyroModal"><inputtype="text"name="wouhou"/><inputtype="submit"value="simple form Filtering Content"/></form>

以IFrame方式弹出的窗口,官网上提供的关闭弹出窗的方法例子并不管用。

通过百度和谷歌中文没找到正确的方法,最后还是谷歌了英文的站点才找到正确的关闭方法,在子窗口中调用如下代码即可

parent.$.nmTop().close();

Form提交文件上传

Form提交文件上传
<formmethod="post"enctype="multipart/form-data"action="http://nyromodal.nyrodev.com/demoSent.php"class="nyroModal"><inputtype="file"name="file"/><inputtype="submit"value="form with file"/></form>

Form提交文件上传并抽取指定内容(用法同Ajax)提交目标页面的元素的ID号为锚链接
<form method="post" enctype="multipart/form-data" action="http://nyromodal.nyrodev.com/demoSent.php#blabla" class="nyroModal">
  <inputtype="file" name="file"/>
  <inputtype="submit" value="form with file Filtering Content"/>
</form>

DOM元素显示
把调用者链接的href设置为目标元素的ID既可。注意目标元素的本身是不作为显示输出的,显示的只是其innerHTML的内容。

<ahref="#test"class="nyroModal">DOM Element (hidden div)</a><divid="test"style="display: none; width: 600px;"><ahref="http://nyromodal.nyrodev.com/demoSent.php"class="nyroModal">Open a new modal</a><br/>Test</div>

如上:只会在弹出窗口显示下图结果

转载于:https://www.cnblogs.com/lynnlin/archive/2011/11/02/2233072.html

基于jQuery的nyroModal模态对话框插件的使用,及IFrame方式窗口的关闭问题相关推荐

  1. 基于jQuery的表单验证插件:jValidate

    网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...

  2. div alert html,基于jQuery的弹出消息插件 DivAlert之旅(一)

    想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来 ...

  3. 推荐20款基于 jQuery CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/日本动画#hotspotmining,查看百度百科页面效果. 2.插件源代码(更新 2017-08-28): jQue ...

  5. 基于JQuery 编写轮播图插件

    基于JQuery 编写轮播图插件 不管是实际开发还是平时的小项目中 ,页面一定有且多个的轮播图,那么为了效率大家可以考虑封装这样的小插件.下面一起看看他的使用方法吧 使用需要准备(往下滑动会看到): ...

  6. 设置网页便签 html5,基于jQuery的页面便签插件

    color-sticker是一款基于jQuery的页面便签插件.它是一个可以任意拖拽,保存,删除,导入和定制颜色的页面便签插件.主要的功能点有以下几点: 点击右上方的蓝色+按钮,可以在页面中添加一个便 ...

  7. 基于jQuery的表单验证插件Validation Engine

    Validation Engine是一款基于Jquery的js表单验证插件.相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合. 附件提供了该插件,解压密码为:im48 ...

  8. 使用Jquery仿模态对话框插件Remodal实现弹出响应窗口

    remodal是一个轻量级.扁平化.响应式模态窗口,可以监测浏览器的大小自适应的的窗口.使用声明式状态符号和哈希(Hash)跟踪.所有现代的浏览器都支持. 首先它是一个插件.下载之后解压,dist中放 ...

  9. 基于JQuery 改造bootstrap模态框拖动功能

    看不爽现有的bootstrap拖动实现,自己也手痒,就自己写了一个拖动处理. PS:其他实现拖动方法 http://www.gbtags.com/gb/rtreplayerpreview/230.ht ...

最新文章

  1. python语言函数库_Python 的标准库,从0到1学Python
  2. 解决安装Tensorflow时的setup-tool错误
  3. 【MM】计划交货成本(Delivery Costs)
  4. gamma校正_什么是Gamma校正?
  5. 特征图注意力_从数据结构到算法:图网络方法初探
  6. 花书+吴恩达深度学习(七)优化方法之基本算法(Momentum, Nesterov, AdaGrad, RMSProp, Adam)
  7. Win10重装系统后如何合并分区?
  8. RSA的JavaScript程序
  9. Java邮件服务学习之一:邮件服务概述
  10. SQL中FOR XML子句的各种用法,包括FOR XML字句的四种基本模式:AUTO模式、RAW模式、PATH模式和EXPLICIT模式...
  11. 韦东山: 作为一个初学者,怎样学习嵌入式Linux?
  12. CSS颜色代码 颜色值 颜色名字大全
  13. 《人工智能》机器学习 - 第1章 机器学习简介
  14. linux ubuntu 安装odb,Ubuntu 使用C++ ORM框架--ODB
  15. Qt【正则表达式】匹配中文汉字,和字母,过滤中英文符号
  16. 【转】photoshop CS2安装激活破解教程
  17. 古城钟楼微博地支报时程序铛,100行代码实现,价值一天20万粉丝
  18. 硕士管理类199联考论说文真题素材
  19. Web大学生网页作业成品——易购商城网站设计与实现(HTML+CSS+JavaScript)
  20. 手机电话本怎么导入另一个手机

热门文章

  1. IceE-1.3.0的移植过程及错误Time.h:36: error: expected type-specifier before ‘time-转
  2. RedHat Linux下Samba配置(简单配置)-转
  3. CCCC-GPLT L1-038. 新世界 团体程序设计天梯赛
  4. 【Sublime】Mac下Sublime代码自动换行
  5. new blob文件设置编码_前端下载文件amp;下载进度
  6. 连接MySQL错误:Can't connect to MySQL server (10060)
  7. 在 Linux 上配置一个 syslog 服务器
  8. springMVC 项目在jboss7中配置应用自己的log4j
  9. docker简单介绍----存储
  10. 使用Picker的时候,让input输入框使用焦点,手机键盘不弹出