窗口模态（model）的实现，让你点不着！

一、唠叨：

今天又重新认识了 bootstrap 这个强悍的UI，但是个人还是觉得在操作布局上面不是自己很能熟悉的。但是它的其他功能真心做的很好。值得深入学些研究的。今天我就简单来自己做一个模态的封装。既然是封装，当然是要很灵活，很方便使用。（补充：第一次做封装UI做的不好请指出批评）下面就来试试吧。

二、概念：

    对话框的两种类型：模态类型和非模态类型
1）模态类型对话框：就是指除非采取有效的关闭手段，用户鼠标点或者输入光标一直停留在其上的对话框。
2）非模态类型对话框：不会强制此特性，用户可以在当前对话框以及其他敞口间进行切换。总之就是如果打开的是        模态窗口，那么你就只能对当前此窗口进行操作，而普通窗口则可以进行任意切换。

三、设计思路：

当触发一个事件时，我们弹出一个模态框，让用户操作当前的模态内容，而禁止非模态框。这里实现禁止非模态层就使用模态层来覆盖它。关于模态的窗口大小这里我使用的是 ： 100% 肯定我觉得这样有欠妥。万一就是内容不到一个显示频的高度时，那么模态窗口也就不会是全屏的了。这个问题要解决也很简单。（通过js获得窗口高度，然后添加到样式中！）；模态我使用的是固定定位。这样可以解决内容过长滚动条下滑模态移动的问题。

四、代码实现：

ＨＴＭＬ－－－＞ 定义模态窗口

//使用方法
<input data-toggle="model" type="button" value="确定删除" />

<!--model盒子-->
<div class="model">
<div class="model-box">
<input data-toggle="close" type="button" value="sure">//关闭模态窗口按钮（暂时不看这里）
//里面可以任意设计，按照你的需求来做吧
</div>
</div>

CSS样式---->

.model{ //这里是模态盒子
position: fixed;top: 0;z-index: 9998;
display: none;width: 100%;height: 100%;
filter: alpha(Opacity=85)-moz-opacity:0.85;
opacity: 0.85;background: #535353;
}
/*model-box*/
.model-box{ //这里是关闭盒子，可以自由设计
margin: 200px auto 0 auto;
width: 300px;height: 250px;
border-radius: 5px;
background-color: #fff;
}

JS---->

(function(){
$('[data-toggle=model]').click(function(){
$('.model').fadeIn(200);
});
$('[data-toggle=close]').click(function(){
$('.model').slideUp(200);
});
})();

五、 分析代码：

发现自己在写这个blog的时候，觉得这个代码写的不好。毕竟麻烦需要css文件 js文件 还要html代码。好吧能力还够吧。暂时就这样了吧！

（1） HTML代码可以放在任意地方，最佳的地方就是结尾吧。

（2） css引入就可以了。

（3） js也一样引入，这个是jquery做的，当然要jquery

（4）这里是使用方法：这个 data-toggle="model" 是一个绑方法，只要你在需要模态的地方加入这句话，就可以实现了。方便快捷！

<input data-toggle="model" type="button" value="确定删除" />

（5）关闭模态：使用data-togle="close"

data-toggle="close"

六、上图吧：算了，图不好看的。思路有点乱了，截个图都揭不来了。img{display: none}想到这里，这样处理图片可以起到缓存图片的效果，图片加载下来了，缓存起来。

最后，如果你想试试效果，看看源码的话，请温柔点击这里： http://www.oschina.net/code/snippet_1242866_35065

（本篇完）