##一模態框（禁止底層應用）
>注釋（說明）部分通過js來改變和控制,模態框提供兩種大小供選擇可以給modal-dialog添加 modal-sm或 modal-lg來控制模態框的大小規格
**代碼**
~~~
<div id="h5c_modal f-dn" data-target="default"><!--這里是控制元素通過load載入--></div>
~~~
>模態框載入代碼示例
~~~
<!-- Modal -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="h5c_modal_title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">確定</button>
</div>
</div>
</div>
<script type="text/javascript">
$("[name='my-checkbox']").bootstrapSwitch({
"onText":"顯示",
"offText":"隱藏",
});
</script>
<!-- Modal End-->
~~~
##對話框彈出層
>注釋（說明）部分通過js來改變和控制
**代碼**
~~~
<div id="h5c_m_dialog_box" class="h5c-m-dialog-box f-ff1" data-target="default">
<h4>
<div id="dialog_box_close" class="f-fr dialog-box-close"><span class="fa fa-close"></span></div>
<div id="dialog_box_title"><!--這里是標題--></div>
</h4>
<div id="dialog_box_unit" class="dialog-box-unit"><!--這里是控制元素--></div>
</div>
~~~
>對話框彈出層控制元件部分示例代碼
~~~
<dl>
<dt>顏色及不透明度</dt>
<dd>顏色：</dd>
<dd><input id="unit_grid_bgcolor" type="text" style="width:180px;height:18px;" /></dd>
<dd>透明度</dd>
<dd><div id="unit_grid_opacity"></div></dd>
</dl>
<div class="f-cb h5c-f-divide"></div>
<dl>
<dt>邊距設置</dt>
<dd>上邊距：</dd>
<dd><div id="unit_grid_padding-top"></div></dd>
<dd>下邊距</dd>
<dd><div id="unit_grid_padding-bottom"></div></dd>
</dl>
<div class="f-cb h5c-f-divide"></div>
<!--以下為js部分，可寫在模塊里面，示個人習慣這里只做為一個示例-->
<script type="text/javascript">
$(function(){
var activeID=$("#h5c_m_dialog_box").data("target");
if ($("link#evol_colorpicker").length == 0) {
$("#h5c_m_dialog_box").prepend('<link id="evol_colorpicker" rel="stylesheet" href="'+diy_url+'assets/lib/jquery.ColorPicker/evol-colorpicker.css" /><script src="'+diy_url+'assets/lib/jquery.ColorPicker/evol-colorpicker.js"><\/script>');
};
$("input#unit_grid_bgcolor").colorpicker({
color: '#9bbb59',
displayIndicator: true,
history: true,
showOn: "button",
strings: "主題色板,基本色,網格色板,主題色板",
transparentColor: true,
}).on("change",function(e,color){
$(activeID).css("background-color",this.value);
});
$("#unit_grid_opacity").slider({
range: "max",
min: 0,
max: 100,
value: 100,
slide: function( event, ui ) {
$(activeID).css({"opacity":ui.value/100});
}
});
$("#unit_grid_padding-top").slider({
range: "max",
min: 0,
max: 20,
value: 0,
slide: function( event, ui ) {
$(activeID).css({"padding-top":ui.value+'px'});
}
})
$("#unit_grid_padding-bottom").slider({
range: "max",
min: 0,
max: 20,
value: 0,
slide: function( event, ui ) {
$(activeID).css({"padding-bottom":ui.value+'px'});
}
})
$("ul.box-unit-border-style>li").click(function(){
$("span.box-unit-border-current").text($(this).text());
$(activeID).css("border","1px "+$(this).data("style")+" #000");
});
})
</script>
~~~
>彈出層使用樣例 文件路徑module/jsw/moduleGridDialog.js
~~~
define(function(require,exports,module){
exports.dialog=function(activeId){
$("#dialog_box_title").text("布局編輯：#"+activeId);
/*載入對話框*/
$("#h5c_m_dialog_box").children("#dialog_box_unit").load(diy_url+'asyn.file/jsw/default.html',function(){
var ww=$(window).width();
$("#h5c_m_dialog_box").show(200).css({
"left":(ww-$(this).width())/2+"px",
"top":"100px"
}).find("#dialog_box_close").click(function(){
$(this).parent().parent().hide(100);
});
}).end().draggable({
handle:"h4",
containment: "parent",
scroll:false,
}).data("target","#"+activeId);
}
});
~~~
