窗口模態（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

  （本篇完）