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提示框。效果如下图:

jQuery学习笔记(jquery.simplemodal插件)

3. 示范二(打开一个iframe,显示一个页面)

3.1 引用CSS与JS文件

参考引用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提示框。效果如下图:

jQuery学习笔记(jquery.simplemodal插件)

4. 示范三(弹出一个发送邮件的页面)

其效果如下图所示,因为代码过于复杂,建议直接下载源代码自己分析。

jQuery学习笔记(jquery.simplemodal插件)

下载地址参考:http://www.ericmmartin.com/projects/simplemodal-demos/

上一篇:jQuery学习笔记(二)jQuery中DOM操作


下一篇:锋利的jQuery学习笔记之jQuery选择器