Author: 刘老师(Aaron Lau)

jQuery的常用插件之SimpleModal模态框

官网地址，使用前请先点此下载

如果碰到浏览器直接打开，下不下来，就把网址复制到迅雷中下。

如果用Linux或者Mac机，请用wget命令下载。

模态框的使用方法非常简单，只有以下三个步骤

1. 引用basic.css
2. 引用jquery.min.js
3. 引用jquery.simplemodal.1.4.4.min.js
4. 执行模态框显示的方法

第一种使用方式

<link type='text/css' href='css/basic.css' rel='stylesheet' />

<!-- 弹出内容 -->

<div id="basic-dialog-ok" style="display: none;">
    <!-- 普通弹出层 -->
    <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>

<script type="text/javascript" src="js/jquery.js" ></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script>
jQuery(function ($) {
    /* 提示框 */
    $('.open-basic-dialog-ok').click(function (e) {
        $('#basic-dialog-ok').modal();
        return false;
    });
});
</script>

第二种使用方式

$.modal("<div><h1>这是一个模态框</h1></div>");

关闭模态框

1. 给关闭按钮添加 class="simplemodal-close" 这个class
2. 手动调用这个方法 $.modal.close();