jQuery学习笔记(jquery.simplemodal插件)
官网地址:http://www.ericmmartin.com/
SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架。SimpleModal非常的灵活,可以创建你能够想像到的任何东西,并且你还不需要考虑UI开发中的跨游览器相关问题。
好像simplemodal1.4.4版本在jQuery2.0上运行有些问题。我的测试结果是IE 10版本中不能正常运行,但在Firefox 23版本与chrome 27版本中运行正常。然后把jQuery版本降到1.9.0后就一切正常了。
1. 如何调用?
1.1 打开模式窗口
SimpleModal提供了两种简单方法来调用模式窗口。
第一种方法是作为一人链式的jQuery函数。你可以在一个用jQuery获取的元素上调用modal()函数,之后用这个元素的内容来显示一个模态窗口。比如:
$.modal(#element-id").modal();
第二种方法是作为一个单独函数使用。通过传递一个jQuery对象,DOM元素或纯文本(可以包含HTML)来创建一个模态窗口。比如:
$.modal("<div><h1>SimpleModal<h1></div>");
以上两种方法都可以接受一个可选参数,比如:
$.("#element-id").midal({options});
$.modal("<div><h1>SimpleModal</h1></div>", {options});
1.2 关闭模态窗口
SimpleModal自动为模式窗口内class是“simplemodal-close“的元素绑定了关闭函数。所以只要在HTML中添加如下代码就可以关闭窗口:
<button type="button" class="simplemodal-close">关闭</button>
// 或者
<a href="#" class="simplemodal-close">关闭</a>
2. 示范一(简单提示模式窗口)
2.1 引用CSS与JS文件
<!-- CSS files -->
<link type='text/css' href='../../css/basic.css' rel='stylesheet' />
<link type='text/css' href='../../css/box.css' rel='stylesheet' /> <!-- Load jQuery, SimpleModal JS files -->
<script type="text/javascript" src="../../js/jquery.js" ></script>
<script type="text/javascript" src="../../js/jquery.simplemodal.js"></script>
2.2 创建弹出框层
<div id="basic-dialog-ok">
<!-- 普通弹出层 [[ -->
<div class="box-title show"><h2>提示</h2></div>
<div class="box-main">
<div class="tips">
<span class="tips-ico">
<span class="ico-ok"><!-- 图标class可以为: ico-ok , ico-error , ico-info , ico-question , ico-warn , ico-wait --></span>
</span>
<div class="tips-content">
<div class="tips-title">申请成功,我们将短信通知您!</div>
<div class="tips-line"></div>
</div>
</div>
<div class="box-buttons"><button type="button" class="simplemodal-close">关 闭</button></div>
</div>
<!-- 普通弹出层 ]] -->
</div>
2.3 创建JS脚本调用
$(function () {
/* 提示框 */
$('.open-basic-dialog-ok').click(function (e) {
$('#basic-dialog-ok').modal();
return false;
});
});
2.4 调用HTML部分
<p>提示框-ok:
<input type='button' name='basic' value='Demo' class='open-basic-dialog-ok'/>
或者
<a href='#' class='open-basic-dialog-ok'>Demo</a></p>
这样单击按钮,或者是超链接,都会出现OK提示框。效果如下图:
3. 示范二(打开一个iframe,显示一个页面)
3.1 引用CSS与JS文件
3.2 创建弹出框层
<div id="ifr-dialog" >
<!-- iframe弹出层 [[ -->
<iframe frameborder="0" scrolling="no" id="ifr-dialog-container" src="javascript:;" class="box-iframe"></iframe>
<!-- iframe弹出层 ]] -->
</div>
3.3 创建JS脚本调用
$(function () {
$('.open-basic-ifr').click(function (e) {
showIframe("http://www.baidu.com","ifr-dialog-content");
return false;
});
}); /* eg:showIframe */
function showIframe(src , id ){
$("#ifr-dialog-container").attr("src",src);
$('#ifr-dialog').modal({opacity:30,"overlayClose":true,"containerId":id });
}
3.4 调用HTML部分
<p>弹出iframe:
<input type='button' name='basic' value='Demo' class='open-basic-ifr'/>
或者
<a href='#' class='open-basic-ifr'>Demo</a></p>
这样单击按钮,或者是超链接,都会出现iframe提示框。效果如下图:
4. 示范三(弹出一个发送邮件的页面)
其效果如下图所示,因为代码过于复杂,建议直接下载源代码自己分析。
下载地址参考:http://www.ericmmartin.com/projects/simplemodal-demos/
jQuery学习笔记(jquery.simplemodal插件)的更多相关文章
- jquery学习笔记---jquery插件开发
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html jquery插件开发:http://www.cnblogs.com/damonla ...
- JQuery学习笔记---jquery对象和DOM对象的关系
1.DOM(Document Object Model,文档对象模型).DOM树 { html (head&&body), head(meta && title) ...
- jquery学习笔记----jquery相关的文档
http://tool.oschina.net/apidocs/apidoc?api=jquery http://www.w3school.com.cn/jquery/jquery_ref_event ...
- JQuery学习笔记——JQuery基础
#,JQuery避免名称冲突的方法 var jq = jQuery.noConfilct(); jq.ready( function(){ jq("p").hidden() ...
- jQuery学习笔记——jQuery常规选择器
一.简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery ...
- jQuery 学习笔记(jQuery: The Return Flight)
第一课. ajax:$.ajax(url[, settings]) 练习代码: $(document).ready(function() { $("#tour").on(" ...
- jQuery学习笔记——jQuery基础核心
代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能 ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
随机推荐
- ldd 以及 ld-linux.so.2
最近跟编译工具干上了,可能是问题积累集中爆发的结果. 今天对 ld-linux.so.x 有很大兴趣,想对它多些了解,遂百度之.发现了指令 ldd. 关于 ldd 其实 ldd 是一个脚本,并不是一个 ...
- java.lang.NoClassDefFoundError: Ljavax/transaction/TransactionManager
网上下载一个 jta.jar包 放到项目 的WebRoot 的lib文件夹下,解决.
- 【Linux】条件判断eq、ne、gt、lt、ge、le
整数比较: -eq(equal) 相等 -ne(inequality) 不相等 -gt(greater than) 大于 -lt(less than) 小于 -ge(greater equal) 大于 ...
- 激光数据匹配(MATLAB Robotics System Toolbox)
正态分布变换算法是一个配准算法,它应用于三维点的统计模型,使用标准最优化技术来确定两个点云间的最优的匹配,因为其在配准过程中不利用对应点的特征计算和匹配,所以时间比其他方法快.算法细节可以参考:NDT ...
- 【php】(转载)分享一个好用的php违禁词 处理类
1.直接上代码: <?php //定义编码 header( 'Content-Type:text/html;charset=utf-8 '); $words=array('我','你','他') ...
- iOS 常用的几个math函数
1.取整数 double ceil (double); 取上整 double floor (double); 取下整 2.绝对值 double fabs (double);求绝对值 double ca ...
- NSObject协议中方法:description 和 debugDescription
description基本概念 1.NSLog(@"%@", objectA);这会自动调用objectA的description方法来输出ObjectA的描述信息. 2.desc ...
- Xcode 常用调试技巧总结
NSLog,po命令和普通断点调试相信每个iOS开发者都会,这里就不作介绍了. 一.Memory Graph Xcode8新增:Memory Graph解决闭包引用循环问题 有很多叹号说明就有问题了. ...
- xfsdump命令使用
一:使用xfsdump备份和恢复xfs文件系统 首先了解一下xfsdump的备份级别有以下两种,默认为0(即完全备份) 0 完全备 ...
- 树莓派进阶之路 (032) -字符问题(2) - 用c语言怎样得到一个汉字的GB2312编码(转)
C/C++支持的是ASCII,不过汉字编码中,GB2312与ASCII是兼容的,所以可以在C中获得汉字的GB2312编码 GB2312是两个字节的,第一字节是高八位,第二字节是低八位,比如下面的程序: ...