##一模态框（禁止底层应用）
>注释（说明）部分通过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);
}
});
~~~
