簡單漂亮的js彈窗 - 自由拖曳 複製程式碼 程式碼如下: 簡單漂亮的js彈跳窗- 自由拖曳 <BR>//作者：zhao jinhan <BR>//時間：2013年10月22日<BR>//信箱：xb_zjh@126.com <BR>function drag(o,s) <BR>{ <BR>//drag(obj [,scroll]); <BR>//obj:物件的id或物件本身; <BR>//scroll(可選):物件是否隨視窗拖曳而滑動，預設為否<br><br>if (typeof o == "string") o = document.getElementById(o); <BR> o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; <BR>o.orig_y = parseInt(o.style.top) - document.body.scrollTop; <BR>o.orig_index = o. style.zIndex; <br><br>o.onmousedown = function(a) <BR>{ <BR>this.style.zIndex = 10000; <BR>var d=document; <BR>if(!a)a>if(!a)a =window.event; <BR>var x = a.clientX d.body.scrollLeft-o.offsetLeft; <BR>var y = a.clientY d.body.scrollTop-o.offsetTop; <br><br>d .ondragstart = "return false;" <BR>d.onselectstart = "return false;" <BR>d.onselect = "document.selection.empty();" <br><br>if(o.setCapture) <BR>o.setCapture(); <BR>else if(window.captureEvents) <BR>window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); <br><br>d.onmousemove = function(a) <BR><BR>d.onmousemove = function(a) <BR>{ <BR>if(!a)a=window.event; <BR>o.style.left = a.clientX document.body.scrollLeft-x; <BR>o.style.top = a.clientY document. body.scrollTop-y; <BR>o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; <br>o.orig_y = parseInt(o.style.top) - document.body.scrollTop; <br>} <BR><BR>d.onmouseup = function() <BR>{ <BR>if(o.releaseCapture) <BR>o.releaseCapture(); <BR>else if(window.captureEvents) <BR>window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); <BR>d.onmousemove = null; <BR>d.onmouseup = null; <BR>d.ondragstart = null; <BR>d. ; <BR>d.onselect = null; <BR>o.style.cursor = "normal"; <BR>o.style.zIndex = o.orig_index; <br>} <br>} <BR><BR> if (s) <BR>{ <BR>var orig_scroll = window.onscroll?window.onscroll:function (){}; <BR>window.onscroll = function () <BR>{ <BR>orig_scroll() <BR>o.style.left = o.orig_x document.body.scrollLeft; <BR>o.style.top = o.orig_y document.body.scrollTop; <BR>} <br>} <br>} <BR>) <BR>} <BR>var title = '提示標題'; <BR>var message='提示內容'; <BR>var TrueEvent=''; <BR>var CancelEvent=''; <BR>var CloseEvent=''; <br>function dialogalert(title, message, TrueEvent, CancelEvent, CloseEvent) { <br>$("#divBackground").removeClass("hidden"); <BR>$("#divMaincontent").removeClass("hidden" ); <br><br>$("#alertTitle").html(title); <BR>$("#alertContent").html(message); <BR><BR>$("#btnSure") .click(function () { <BR>$("#divBackground").addClass("hidden"); <BR>$("#divMaincontent").addClass("hidden"); <BR>$("# btnSure").unbind("click"); <BR>if (TrueEvent) { <br>//確認之後跳轉url <br>window.location.href = TrueEvent; <br>} <br><BR> }); //確定<BR><BR>$("#btnCancel").click(function () { <BR>$("#divBackground").addClass("hidden"); <BR>$(" #divMaincontent").addClass("hidden"); <BR>$("#btnCancel").unbind("click"); <BR>if (CancelEvent) { <BR>//取消之後跳到url <br>window.location.href = CancelEvent; <br>} <BR>});//取消<BR><BR>$("#btnClose").click(function () { <BR>$("#divBackground ").addClass("hidden"); <BR>$("#divMaincontent").addClass("hidden"); <BR>$("#btnClose").unbind("click"); <BR>if (CloseEvent) { <br>//關閉之後跳轉url <br>window.location.href = CloseEvent; <BR>} <br><br>});//X關閉<BR>} <BR><BR>$(function(){ <BR>drag("divMaincontent"); <BR>dialogalert("彈跳窗標題","彈跳窗資訊",'http://www.baidu.com/','http ://www.icode100.com/','http://bbs.icode100.com/'); <br>}); <br> <BR><BR>body, p { <BR>background: none repeat scroll 0 0 #FFFFFF; <BR>color: #333333; <BR>font-size: 12px; <BR>margin: 0 <BR>padding: 0; <BR>} <BR>.hidden { display:none} <BR>.left { float:left } <BR>.right { float:right } <BR>#divMaincontent { <BR>font- family: "微軟雅黑","宋體",Microsoft Yahei,Tahoma,Arial,sans-serif; <BR>font-size: 100%; <BR>font-weight: normal; <BR>position:absolute; <BR>vertical-align: baseline; <BR>} <BR>#divMaincontent a { text-decoration:none; color:#333333;} <BR>.blackf1 { <BR>clear: both; <BR>.blackf1 { <BR>clear: both; <BR>font-size : 0; <BR>height: 12px; <BR>line-height: 12px; <BR>} <BR>.fontcolorf1 { <BR>color: #999999; <BR>} <BR>. border: 4px solid rgba(0, 0, 0, 0.1); <BR>left: 40%; <BR>position: fixed; <BR>top: 40%; <BR>width: 318px; index: 10001; <BR>} <BR>.pm_tit1 { <BR>background: url("images/dialog_blue.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0); <BR>color <BR>color <BR>color <BR>color <BR>color <🎜>color <🎜>color <🎜>color <🎜>color <🎜>color <🎜>color <🎜>color <🎜>color : #FFFFFF; <🎜>height: 26px; <🎜>line-height: 26px; <🎜>padding: 0 1px; <🎜>text-indent: 16px; <🎜>width: 100%; move; <🎜>}<BR>.pm_tit1 a { <BR>background: url("images/pm_bg.png") 無重複滾動0 -67px rgba(0, 0, 0, 0); <BR>遊標：指針； <BR>高度：20px; <BR>右邊距：10px; <BR>寬度：20px; <BR>} <BR>.pm_tit1 a:hover { <BR>背景位置：0 -90px; <BR>} <BR>} <BR>背景位置：0 -90px; <BR>} <BR>} <BR>.pm_con11 { <BR>背景：無重複滾動 0 0 #CCCCCC; <BR>最大高度：150px; <BR>溢出-y：自動； <BR>內邊距：0 1px 1px； <BR>寬度：100%； <BR>} <BR>.pm_con2 { <BR>背景：無重複滾動0 0 #FFFFFF; <BR>溢出：隱藏； <BR>內邊距：16px 0; <BR>寬度：100%； <BR>} <BR>.pm_con2 p { <BR>margin-left: 80px; <BR>內邊距：2px 0; <BR>文字對齊：左； <BR>} <BR>.pm_con2 p.fontcolorf3 { <BR>字體大小：14px; <BR>字體粗細：粗體； <BR>} <BR>.pm_btn1 a, .pm_btn1 a:link, .pm_btn1 a:visited, .pm_btn1 a:hoverlink, .pm_btn1 a:visited, .pm_btn1 a:hoverlink, .pm_btn1 a:pm_btn1 aactive:hover, . { <BR>背景: url("images/pm_bg.png")不重複滾動0 0 rgba(0, 0, 0, 0); <BR>顯示：內聯區塊； <BR>高度：28px； <BR>行高：28px; <BR>邊距：3px 40px 0 0; <BR>文字對齊：居中； <BR>寬度：53px; <BR>} <BR>.pm_btn1 a:hover { <BR>背景位置🎜>背景位置：0 -35px; <BR>顏色：#333333; <BR>文字裝飾：無； <BR>} <BR></風格> <BR></頭> <BR><身體> <BR><div class="pm_mainhidden" id="divMaincontent"> <BR><div class="pm_tit1"><span class="left">提示訊息<a class="right" id="btnClose" href= "javascript:void( 0)"> 提示; 今日秒殺已販售 確認取消 腳本> 身體> 效果圖： 圖片/裡面的圖片： dialog_blue.gif: pm_bg.png 檔案包下載：http://www.jb511. /jiaoben/112059.html
