jQuery插件封装：浮动div模式框

该插件是基于开源JS库 库jquery.leanModal.min.js改造而来，其官网 http://leanmodal.finelysliced.com.au/ ， LeanModal 是一个简单的 jQuery 插件，用于实现模态窗口。它是专为小的对话框，提示和面板等需要使用模式窗口的场合打造的。专门用来处理隐藏的内容，并且不应用任何样式给目标元素 。虽然LeanModal具有较多的优势，但在实际开发过程中往往不灵活，因而对原LeanModal插件进行了改造，以其达到灵活控制，同时便于二次开发，改造主要涉及：（1）由原来的实例方法$.fn.extend改为静态方法$.extend，便于直接调用；（2）采用两个方法openHaiwiModal和closeHaiwiModal操作模式框，便于和辅助功能的协同操作。

效果图如下：

使用该插件需注意一下几点：

(1)必须包括样式

.haiwi-modal-overlay{
    position:fixed;
    z-index:10000;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    background:#000;
    display:none;
}

(2)引入jQuery库和haiwiModal.js库

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="haiwiModal.js"></script>

(3)设置Div模式框的初始显示状态为隐藏

<div id="modalDiv" style="display:none;"></div>

(4)使用$.openHaiwiModal和$.closeHaiwiModal弹出Div模式框

$.openHaiwiModal("modalDiv");
$.closeHaiwiModal("modalDiv");

另 可以设置options自定义参数,如设置点击遮罩自动层关闭弹出层参数

$.openHaiwiModal("modalDiv"，{closeClickOverlay:true});

链接： 源码和demo