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

    1、唠叨：

        今天又从新认识了 bootstrap 这个强悍的UI，可是我的仍是以为在操做布局上面不是本身很能熟悉的。可是它的其余功能真心作的很好。值得深刻学些研究的。今天我就简单来本身作一个模态的封装。既然是封装，固然是要很灵活，很方便使用。（补充：第一次作封装UI作的很差请指出批评）下面就来试试吧。

    2、概念：       

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

    3、设计思路：

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

    4、代码实现：

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

//使用方法
<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);
    });
})();

   5、 分析代码：

        发现本身在写这个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"

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

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

  （本篇完）