jquery_dialog實現效果
jquery_dialog.js
<!-- /***************************************************************************** [作者] 吳劍 http://wu-jian.cnblogs.com/ [版本記錄] 2009-06-01：版本1.0.1發布。 2009-07-05：版本1.0.2，更新了一些明顯的BUG，完全支持了IE系列瀏覽器。 2009-08-15：版本1.0.3，封裝了標准DOM，多瀏覽器下兼容，樣式美化，添加了陰影效果。 2009-11-05：版本2.0.0，基於JQuery全新封裝，應用了JS的命名空間，避免了客戶端id沖突。 項目正式更名為JQuery Dialog，優化了拖拽的核心實現，完全支持跨瀏覽器。 2009-12-13：版本2.0.1，優化了核心的拖拽算法，分離出DragAndDrop類。 使用異步的Javascript讓拖拽更為流暢。 修復了鼠標拖動過快Dialog停頓的BUG。 對拖拽的位置與滾動條之間進行協調，限制拖拽范圍，修復了原有BUG。 修復了當Dialog寬或高大於頁面時定位的BUG。 修復了鼠標樣式與拖拽控制區不精確的BUG。 至此，完善為一個較為強壯JQuery插件了。 2010-02-03：版本2.0.3，JQuery升級為1.4。 為Open增加了內部擴展接口。 修復IE6下部分顯示BUG。 *****************************************************************************/ var JqueryDialog = { //配置項 //模態窗口背景色 "cBackgroundColor" : "#ffffff", //邊框尺寸(像素) "cBorderSize" : 2, //邊框顏色 "cBorderColor" : "#999999", //Header背景色 "cHeaderBackgroundColor" : "#f0f0f0", //右上角關閉顯示文本 "cCloseText" : "X 關閉", //鼠標移上去時的提示文字 "cCloseTitle" : "關閉", //Bottom背景色 "cBottomBackgroundColor" : "#f0f0f0", //提交按鈕文本 "cSubmitText" : "確 認", //取消按鈕文本 "cCancelText" : "取 消", //拖拽效果 "cDragTime" : "100", /// <summary>創建對話框</summary> /// <param name="dialogTitle">對話框標題</param> /// <param name="iframeSrc">iframe嵌入頁面地址</param> /// <param name="iframeWidth">iframe嵌入頁面寬</param> /// <param name="iframeHeight">iframe嵌入頁面高</param> Open:function(dialogTitle, iframeSrc, iframeWidth, iframeHeight){ JqueryDialog.init(dialogTitle, iframeSrc, iframeWidth, iframeHeight, true, true, true); }, /// <summary>創建對話框</summary> /// <param name="dialogTitle">對話框標題</param> /// <param name="iframeSrc">iframe嵌入頁面地址</param> /// <param name="iframeWidth">iframe嵌入頁面寬</param> /// <param name="iframeHeight">iframe嵌入頁面高</param> /// <param name="isSubmitButton">是否呈現“確認”按鈕</param> /// <param name="isCancelButton">是否呈現“取消”按鈕</param> /// <param name="isDrag">是否支持拖拽</param> Open1:function(dialogTitle, iframeSrc, iframeWidth, iframeHeight, isSubmitButton, isCancelButton, isDrag){ JqueryDialog.init(dialogTitle, iframeSrc, iframeWidth, iframeHeight, isSubmitButton, isCancelButton, isDrag); }, /// <summary>創建對話框</summary> /// <param name="dialogTitle">對話框標題</param> /// <param name="iframeSrc">iframe嵌入頁面地址</param> /// <param name="iframeWidth">iframe嵌入頁面寬</param> /// <param name="iframeHeight">iframe嵌入頁面高</param> /// <param name="isSubmitButton">是否呈現“確認”按鈕</param> /// <param name="isCancelButton">是否呈現“取消”按鈕</param> /// <param name="isDrag">是否支持拖拽</param> init:function(dialogTitle, iframeSrc, iframeWidth, iframeHeight, isSubmitButton, isCancelButton, isDrag){ //獲取客戶端頁面寬高 var _client_width = document.body.clientWidth; var _client_height = document.documentElement.scrollHeight; //create shadow if(typeof($("#jd_shadow")[0]) == "undefined"){ //前置 $("body").prepend("<div id='jd_shadow'> </div>"); var _jd_shadow = $("#jd_shadow"); _jd_shadow.css("width", _client_width + "px"); _jd_shadow.css("height", _client_height + "px"); } //create dialog if(typeof($("#jd_dialog")[0]) != "undefined"){ $("#jd_dialog").remove(); } $("body").prepend("<div id='jd_dialog'></div>"); //dialog location //left 邊框*2 陰影5 //top 邊框*2 陰影5 header30 bottom50 var _jd_dialog = $("#jd_dialog"); var _left = (_client_width - (iframeWidth + JqueryDialog.cBorderSize * 2 + 5)) / 2; _jd_dialog.css("left", (_left < 0 ? 0 : _left) + document.documentElement.scrollLeft + "px"); var _top = (document.documentElement.clientHeight - (iframeHeight + JqueryDialog.cBorderSize * 2 + 30 + 50 + 5)) / 2; _jd_dialog.css("top", (_top < 0 ? 0 : _top) + document.documentElement.scrollTop + "px"); //create dialog shadow _jd_dialog.append("<div id='jd_dialog_s'> </div>"); var _jd_dialog_s = $("#jd_dialog_s"); //iframeWidth + double border _jd_dialog_s.css("width", iframeWidth + JqueryDialog.cBorderSize * 2 + "px"); //iframeWidth + double border + header + bottom _jd_dialog_s.css("height", iframeHeight + JqueryDialog.cBorderSize * 2 + 30 + 50 + "px"); //create dialog main _jd_dialog.append("<div id='jd_dialog_m'></div>"); var _jd_dialog_m = $("#jd_dialog_m"); _jd_dialog_m.css("border", JqueryDialog.cBorderColor + " " + JqueryDialog.cBorderSize + "px solid"); _jd_dialog_m.css("width", iframeWidth + "px"); _jd_dialog_m.css("background-color", JqueryDialog.cBackgroundColor); //header _jd_dialog_m.append("<div id='jd_dialog_m_h'></div>"); var _jd_dialog_m_h = $("#jd_dialog_m_h"); _jd_dialog_m_h.css("background-color", JqueryDialog.cHeaderBackgroundColor); //header left _jd_dialog_m_h.append("<span id='jd_dialog_m_h_l'>" + dialogTitle + "</span>"); _jd_dialog_m_h.append("<span id='jd_dialog_m_h_r' title='" + JqueryDialog.cCloseTitle + "' onclick='JqueryDialog.Close();'>" + JqueryDialog.cCloseText + "</span>"); //body _jd_dialog_m.append("<div id='jd_dialog_m_b'></div>"); var _jd_dialog_m_b = $("#jd_dialog_m_b"); _jd_dialog_m_b.css("width", iframeWidth + "px"); _jd_dialog_m_b.css("height", iframeHeight + "px"); //iframe 遮罩層 _jd_dialog_m_b.append("<div id='jd_dialog_m_b_1'> </div>"); var _jd_dialog_m_b_1 = $("#jd_dialog_m_b_1"); _jd_dialog_m_b_1.css("top", "30px"); _jd_dialog_m_b_1.css("width", iframeWidth + "px"); _jd_dialog_m_b_1.css("height", iframeHeight + "px"); _jd_dialog_m_b_1.css("display", "none"); //iframe 容器 _jd_dialog_m_b.append("<div id='jd_dialog_m_b_2'></div>"); //iframe $("#jd_dialog_m_b_2").append("<iframe id='jd_iframe' src='"+iframeSrc+"' scrolling='no' frameborder='0' width='"+iframeWidth+"' height='"+iframeHeight+"' />"); //bottom _jd_dialog_m.append("<div id='jd_dialog_m_t' style='background-color:"+JqueryDialog.cBottomBackgroundColor+";'></div>"); var _jd_dialog_m_t = $("#jd_dialog_m_t"); if(isSubmitButton){ _jd_dialog_m_t.append("<span><input id='jd_submit' value='"+JqueryDialog.cSubmitText+"' type='button' onclick='JqueryDialog.Ok();' /></span>"); } if(isCancelButton){ _jd_dialog_m_t.append("<span class='jd_dialog_m_t_s'><input id='jd_cancel' value='"+JqueryDialog.cCancelText+"' type='button' onclick='JqueryDialog.Close();' /></span>"); } //register drag if(isDrag){ DragAndDrop.Register(_jd_dialog[0], _jd_dialog_m_h[0]); } }, /// <summary>關閉模態窗口</summary> Close:function(){ $("#jd_shadow").remove(); $("#jd_dialog").remove(); }, /// <summary>提交</summary> /// <remark></remark> Ok:function(){ var frm = $("#jd_iframe"); if (frm[0].contentWindow.Ok()){ JqueryDialog.Close() ; } else{ frm[0].focus() ; } }, /// <summary>提交完成</summary> /// <param name="alertMsg">彈出提示內容，值為空不彈出</param> /// <param name="isCloseDialog">是否關閉對話框</param> /// <param name="isRefreshPage">是否刷新頁面(關閉對話框為true時有效)</param> SubmitCompleted:function(alertMsg, isCloseDialog, isRefreshPage){ if($.trim(alertMsg).length > 0 ){ alert(alertMsg); } if(isCloseDialog){ JqueryDialog.Close(); if(isRefreshPage){ window.location.href = window.location.href; } } } }; var DragAndDrop = function(){ //客戶端當前屏幕尺寸(忽略滾動條) var _clientWidth; var _clientHeight; //拖拽控制區 var _controlObj; //拖拽對象 var _dragObj; //拖動狀態 var _flag = false; //拖拽對象的當前位置 var _dragObjCurrentLocation; //鼠標最后位置 var _mouseLastLocation; //使用異步的Javascript使拖拽效果更為流暢 //var _timer; //定時移動，由_timer定時調用 //var intervalMove = function(){ // $(_dragObj).css("left", _dragObjCurrentLocation.x + "px"); // $(_dragObj).css("top", _dragObjCurrentLocation.y + "px"); //}; var getElementDocument = function(element){ return element.ownerDocument || element.document; }; //鼠標按下 var dragMouseDownHandler = function(evt){ if(_dragObj){ evt = evt || window.event; //獲取客戶端屏幕尺寸 _clientWidth = document.body.clientWidth; _clientHeight = document.documentElement.scrollHeight; //iframe遮罩 $("#jd_dialog_m_b_1").css("display", ""); //標記 _flag = true; //拖拽對象位置初始化 _dragObjCurrentLocation = { x : $(_dragObj).offset().left, y : $(_dragObj).offset().top }; //鼠標最后位置初始化 _mouseLastLocation = { x : evt.screenX, y : evt.screenY }; //注：mousemove與mouseup下件均針對document注冊，以解決鼠標離開_controlObj時事件丟失問題 //注冊事件(鼠標移動) $(document).bind("mousemove", dragMouseMoveHandler); //注冊事件(鼠標松開) $(document).bind("mouseup", dragMouseUpHandler); //取消事件的默認動作 if(evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; //開啟異步移動 //_timer = setInterval(intervalMove, 10); } }; //鼠標移動 var dragMouseMoveHandler = function(evt){ if(_flag){ evt = evt || window.event; //當前鼠標的x,y座標 var _mouseCurrentLocation = { x : evt.screenX, y : evt.screenY }; //拖拽對象座標更新(變量) _dragObjCurrentLocation.x = _dragObjCurrentLocation.x + (_mouseCurrentLocation.x - _mouseLastLocation.x); _dragObjCurrentLocation.y = _dragObjCurrentLocation.y + (_mouseCurrentLocation.y - _mouseLastLocation.y); //將鼠標最后位置賦值為當前位置 _mouseLastLocation = _mouseCurrentLocation; //拖拽對象座標更新(位置) $(_dragObj).css("left", _dragObjCurrentLocation.x + "px"); $(_dragObj).css("top", _dragObjCurrentLocation.y + "px"); //取消事件的默認動作 if(evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; } }; //鼠標松開 var dragMouseUpHandler = function(evt){ if(_flag){ evt = evt || window.event; //取消iframe遮罩 $("#jd_dialog_m_b_1").css("display", "none"); //注銷鼠標事件(mousemove mouseup) cleanMouseHandlers(); //標記 _flag = false; //清除異步移動 //if(_timer){ // clearInterval(_timer); // _timer = null; //} } }; //注銷鼠標事件(mousemove mouseup) var cleanMouseHandlers = function(){ if(_controlObj){ $(_controlObj.document).unbind("mousemove"); $(_controlObj.document).unbind("mouseup"); } }; return { //注冊拖拽(參數為dom對象) Register : function(dragObj, controlObj){ //賦值 _dragObj = dragObj; _controlObj = controlObj; //注冊事件(鼠標按下) $(_controlObj).bind("mousedown", dragMouseDownHandler); } } }(); //-->
jquery_dialog.css
#jd_shadow{z-index:999;position:absolute;background-color:#000000;filter:alpha(opacity=25);-moz-opacity:0.25;opacity:0.25;} #jd_dialog{z-index:1000;position:absolute;} #jd_dialog_s{position:absolute;top:5px;left:5px;background-color:#000000;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;} #jd_dialog_m{position:absolute;} #jd_dialog_m_h{float:left;width:100%;height:30px;cursor:move;} #jd_dialog_m_h_l{float:left;color:black;font-weight:bold;padding-top:7px;padding-left:5px;} #jd_dialog_m_h_r{float:right;color:black;padding-top:7px;padding-right:5px;cursor:pointer;} #jd_dialog_m_b{float:left;} #jd_dialog_m_b_1{position:absolute;alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;z-index:900;} #jd_dialog_m_b_2{position:absolute;z-index:899;} #jd_dialog_m_t{float:left;width:100%;height:40px;padding-top:10px;text-align:center;} .jd_dialog_m_t_s{padding-left:10px;}
default.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery Dialog 2.0 Demo</title> <link type="text/css" rel="stylesheet" href="jquery_dialog.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery_dialog.js"></script> </head> <body style="margin:0px;padding:0px;"> <form id="form1"> <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFCCFF"> <tr> <td height="30" align="center"><font style="font-size:16px;font-weight:bold;">JQuery Dialog 2.0.3 Demo</font></td> </tr> <tr> <td height="30" align="center"><a href="http://wu-jian.cnblogs.com/" target="_blank">http://wu-jian.cnblogs.com/</a></td> </tr> <tr> <td> </td> </tr> <tr> <td> <font style="color:blue;font-weight:bold;">[debug data]</font> <font>dialog x:</font><font style="color:red;font-weight:bold;" id="_ocl_x"></font> <font>dialog y:</font><font style="color:red;font-weight:bold;" id="_ocl_y"></font> <font>moving flag:</font><font style="color:red;font-weight:bold;" id="_flag"></font> <font>temp 1:</font><font style="color:red;font-weight:bold;" id="_temp1"></font> <font>temp 2:</font><font style="color:red;font-weight:bold;" id="_temp2"></font> </td> </tr> <tr> <td> </td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" height="60" align="center"><input type="button" name="s1" value="彈出1" onclick="JqueryDialog.Open('模態DIV1', 'inner1.html', 300, 1000);" /></td> <td width="80%"> 彈出inner1.html，寬300PX，高300PX，提交后執行inner1中腳本，關閉Dialog</td> </tr> </table></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" height="60" align="center"><input type="button" name="s2" value="彈出2" onclick="JqueryDialog.Open('模態DIV2', 'inner2.html', 300, 300);" /></td> <td width="80%"> 彈出inner2.html，寬300PX，高300PX，提交后執行inner2中腳本，不關閉Dialog</td> </tr> </table></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" height="60" align="center"><input type="button" name="s3" value="彈出3" onclick="JqueryDialog.Open('模態DIV3', 'inner3.html', 300, 300);" /></td> <td width="80%"> 彈出inner3.html，寬300PX，高300PX，inner3.html向模擬服務端serverPost.html提交(POST)，serverPost中邏輯處理，最后由serverPost回調JQuery Dialog</td> </tr> </table></td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" height="60" align="center"><input type="button" name="s4" value="彈出4" onclick="JqueryDialog.Open('模態DIV4', 'inner4.html', 1600, 1600);" /></td> <td width="80%"> 彈出inner4.html，寬1600PX，高1600PX，JQuery Dialog回調函數！</td> </tr> </table></td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </form> </body> </html>