jquery easyui dialog不超出父容器以及隨瀏覽器縮放
阿新 • • 發佈：2019-02-01
tag：jquery , easyui, dialog , 縮放
code:
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=GBK"> <title></title> <link rel="stylesheet" type="text/css" href="../sources/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../sources/themes/icon.css"> <script type="text/javascript" src="../sources/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../sources/jquery.easyui.min.js"></script> <style type="text/css"> body{width:100%;height:100%;} TABLE{WIDTH:100%;} #divDialog{padding:5px;} </style> <script type="text/javascript"> function fixWidth(percent){ return document.body.clientWidth * percent; } function openDivDialog(){ $("#divDialog").dialog("open"); } function closeDivDialog(){ $("#divDialog").dialog("close"); } $(function(){ $(window).resize(function(){ $("#divDialog").dialog({ width:fixWidth(0.4) }); }); $("#divDialog").dialog({ title:"對話方塊", collapsible:true, minimizable:true, maximizable:true, resizable:true, //modal:true, 是否是模式對話方塊 width:fixWidth(0.4), height:200, //fitColumns:true,適應父容器的大小 doSize:true, toolbar:[{ text:"Add", iconCls:"icon-add", handler:function(){ alert("這是單擊add按鈕事件"); } },"-",{ text:"save", iconCls:"icon-save", handler:function(){ alert("這是單擊save按鈕事件"); } }], buttons:[{ text:"Ok", iconCls:"icon-ok", handler:function(){ alert("這是單擊ok按鈕事件"+$("#divDialog")); } },{ text:"Cancle", handler:function(){ alert("這是單擊cancle按鈕事件,關閉dialog"); $("#divDialog").dialog("close"); } }], //事件繫結 onMove:function(left,top){ var right，bottom; //alert($("body").width()+"---"+left +"----"+ $("#divDialog").width()+"="+($("#divDialog").width()+left)); var bodyWidth = $("body").width(); var bodyHeight = $("body").height(); var dialogwidth = $("#divDialog").width(); var dialogHeight = $("#divDialog").height(); if(left < 0){ $("#divDialog").dialog("move",{left:0,top:top}); }else if((left + dialogwidth) > (bodyWidth - 50)){ right = bodyWidth - dialogwidth - 50; $("#divDialog").dialog("move",{left:right,top:top}); } if(top < 0){ $("#divDialog").dialog("move",{left:left,top:0}); }else if(top > (bodyHeight - dialogHeight - 50 )){ bottom = bodyHeight - dialogHeight - 50; $("#divDialog").dialog("move",{left:left,top:bottom}); } } }); }); </script> </head> <body onresize="openDivDialog();"> <h1>Dialog</h1> <div> <a href="#" onclick="openDivDialog();">open</a> <a href="#" onclick="closeDivDialog();">close</a> </div> <div id="divDialog" icon="icon-save"> <TABLE> <TR align="center" bgColor="#dcdcdc"> <TD>使用者編號</TD> <TD>試用時間</TD> <TD>轉正時間</TD> <TD>性別</TD> <TD>姓名拼音</TD> <TD>生日時間</TD> <TD>民族</TD> <TD>身高</TD> </TR> <TR> <TD style="WIDTH: 75px">2000001</TD> <TD>1997-3-13 0:00:00</TD> <TD>1997-3-13 0:00:00</TD> <TD>1</TD> <TD>WZJ</TD> <TD>1965-3-13 0:00:00</TD> <TD>漢</TD> <TD>171</TD> </TR> <TR> <TD style="WIDTH: 75px">2000045</TD> <TD>2001-2-15 0:00:00</TD> <TD>2001-3-15 0:00:00</TD> <TD>0</TD> <TD>WY</TD> <TD>1978-8-5 0:00:00</TD> <TD>漢</TD> <TD>162</TD> </TR> <TR> <TD style="WIDTH: 75px">2000046</TD> <TD>2001-2-23 0:00:00</TD> <TD>2001-3-23 0:00:00</TD> <TD>0</TD> <TD>LQ</TD> <TD>2001-2-23 0:00:00</TD> <TD>漢</TD> <TD>171</TD> </TR> </TABLE> </div> </body> </html>