JQuery的SimpleModal插件

两种调用方式

• 在jQuery获取的元素上调用modal()函数，之后用这个元素的内容显示一个模态窗口

                  $("#element-id").modal();
  

  • 作为一个单独的函数使用

    $.modal("<div><h1>SimpleModal</h1></div>");
    

以上两种方法都可以接受一个可选参数

    $("#element-id").modal(options);
    $.modal("<div><h1>SimpleModal</h1></div>",{options});

---

以上的两个例子只是创建非常基本的没有样式的模态窗口。你也可以通过外部CSS，选项对象或两个一起来应用样式。modal overlay、container和data元素的CSS选项分别是：overlayCss、containerCss和dataCss,他们都是键值对（Key/Value）属性。SimpleModal为显示一个模态窗口设置了必要的CSS，另外它动态地把模态窗口置于屏幕中间，除非预先使用了position参数。
SimpleModal在内部定义了如下CSS类：simplemodal-overlay,simplemodal-container,simplemodal-wrap(如果内容比container大，那么它将自动设置overflow为auto)和simplemodal-data。
SimpleModal的closeHTML参数默认声明一个用于关闭模态窗口的图片样式：modalcloseImg,因为它被定义在参数里面，不能通过参数来应用样式，所以一个外部CSS定义是必须的。

 #simplempdal-container a.modalCloseImg{
    background:url(/img/x.png) no-repeat;//更换关闭的图片
    width:25px;
    height:29px;
    dislay:inline;
    z-index:3200;
    position:absolute;
    top:-15px;
    right:-18px;
    cursor:pointer;
}

关闭模态窗口

SimpleModal自动为模态窗口内class是“simplemodal-close”的元素关系绑定了关闭函数。所以只要在HTML中添加如下代码就可以关闭窗口：

    <button type="button" class="simplemodal-close" >关闭</button>
    <a href="#" class="simplemodal-close">关闭</a>

一个例子

1、接下来我们使用SimpleModal来制作模态提示框和模态的iframe。首先我们在页面中插入要弹出的内容，并把样式设置好：

<div id="basic-dialog-warn">
    <!--普通弹出层-->
    <div class="box-title show"><h2>提示</h2></div>

    <div class="box-main">
        <div class="tips">
            <span class="tips-ico">
                <span class="ico-warn"><!--图标-->
            </span>
            <div class="tip-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>
    <!--普通弹出层-->        

2、然后我们就可以利用下面的代码调用SimpleModal:
$(‘#basic-dialog-warn’).modal();

---

同样的模态框用iframe 页面来实现
首先在页面中新建一段HTML代码，代码如下：

    <div id="ifr-dialog">
        <!--iframe弹出层 [[-->
        <iframe frameborder="0" scrolling="no" id="ifr-dialog-container" src="javascript:;" class="boxiframe"></iframe>
        </--iframe弹出层 ]]-->
    </div>

此时iframe 的src是没有指向地址，我们可以在调用SimpleModal的时候，给它赋一个值，代码如下：

    $("#ifr-dialog-container").attr("src","http://www.baidu.com");
    $("#ifr-dialog").modal({
        "opacity":30,
        "overlayClose":true,
        "containerId":"ifr-dialog-content"
})

这样，我们就能把iframe页面以模态窗口的方式显示出来了。在以上代码中，在调用SimleModal时，设置了3个参数。"opacity" 用来设置遮罩层的不透明度。"overlayClose"设置为true,代表着单击遮罩层也能关闭模态窗口。"containerId"是一个非常有用的参数，它用来设置模态窗口容器的ID(默认值为simplemodal-container),通过这个钩子，我们能为容器定义各种规则。比如本例中，容器的ID被设置为ifr-dialog-content，在CSS样式中，为它设置得到样式如下：

    #ifr-dialog-content{
    height:300px;
    width :700px;
    }