2019獨角獸企業重金招聘Python工程師標準>>>

一、嘮叨：

今天又重新認識了 bootstrap 這個強悍的UI，但是個人還是覺得在操作佈局上面不是自己很能熟悉的。但是它的其他功能真心做的很好。值得深入學些研究的。今天我就簡單來自己做一個模態的封裝。既然是封裝，當然是要很靈活，很方便使用。（補充：第一次做封裝UI做的不好請指出批評）下面就來試試吧。

二、概念：

對話方塊的兩種型別：模態型別和非模態型別
1）模態型別對話方塊：就是指除非採取有效的關閉手段，使用者滑鼠點或者輸入游標一直停留在其上的對話方塊。
2）非模態型別對話方塊：不會強制此特性，使用者可以在當前對話方塊以及其他敞口間進行切換。總之就是如果開啟的是模態視窗，那麼你就只能對當前此視窗進行操作，而普通視窗則可以進行任意切換。
 

三、設計思路：

當觸發一個事件時，我們彈出一個模態框，讓使用者操作當前的模態內容，而禁止非模態框。這裡實現禁止非模態層就使用模態層來覆蓋它。關於模態的視窗大小這裡我使用的是 ： 100% 肯定我覺得這樣有欠妥。萬一就是內容不到一個顯示頻的高度時，那麼模態視窗也就不會是全屏的了。這個問題要解決也很簡單。（通過js獲得視窗高度，然後新增到樣式中！）；模態我使用的是固定定位。這樣可以解決內容過長滾動條下滑模態移動的問題。

四、程式碼實現：

ＨＴＭＬ－－－＞定義模態視窗

//使用方法
<inputdata-toggle="model"type="button"value="確定刪除"/>

<!--model盒子-->
<divclass="model">
<divclass="model-box">
<inputdata-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:200pxauto0auto;
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" 是一個綁方法，只要你在需要模態的地方加入這句話，就可以實現了。方便快捷！

<inputdata-toggle="model"type="button"value="確定刪除"/>

（5）關閉模態：使用data-togle="close"

data-toggle="close"

六、上圖吧：算了，圖不好看的。思路有點亂了，截個圖都揭不來了。img{display: none}想到這裡，這樣處理圖片可以起到快取圖片的效果，圖片載入下來了，快取起來。

最後，如果你想試試效果，看看原始碼的話，請溫柔點選這裡：http://www.oschina.net/code/snippet_1242866_35065

（本篇完）

轉載於:https://my.oschina.net/leipeng/blog/222842