Dialog（对话框窗口）

Posted 2020-10-31 wangfd

创建dialog方式

一：

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;">   
    Dialog Content.    
</div>

这里为什么加了class="easyui-dialog"就会出现想要的效果，不加就是一个div，因为除了css样式的缘故，主要是parser解析器的原因

二：

<script type="text/javascript">
    $(function(){
        $(‘#dd‘).dialog();
    })
</script>

<div id="dd" title="My Dialog" style="width:400px;height:200px;">   
    Dialog Content.    
</div> 

效果图：

加入模式化属性：使背景不可选中

$(function(){
    $(‘#dd‘).dialog({
        modal : true
    });
})

三：使用easyloader方式加载（个人觉得不推荐）

<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/easyloader.js" ></script>
<script type="text/javascript">
$(function(){
    easyloader.load(‘dialog‘,function(){
       $(‘#dd‘).dialog({
           modal : true
       });
    });
});
</script>