簡單漂亮的js彈窗可自由拖曳且相容於大部分瀏覽器_javascript技巧

簡單漂亮的js彈窗 - 自由拖曳

複製程式碼 程式碼如下:

簡單漂亮的js彈跳窗- 自由拖曳 //作者：zhao jinhan //時間：2013年10月22日 //信箱：xb_zjh@126.com function drag(o,s) { //drag(obj [,scroll]); //obj:物件的id或物件本身; //scroll(可選):物件是否隨視窗拖曳而滑動，預設為否

if (typeof o == "string") o = document.getElementById(o); o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; o.orig_y = parseInt(o.style.top) - document.body.scrollTop; o.orig_index = o. style.zIndex;

o.onmousedown = function(a) { this.style.zIndex = 10000; var d=document; if(!a)a>if(!a)a =window.event; var x = a.clientX d.body.scrollLeft-o.offsetLeft; var y = a.clientY d.body.scrollTop-o.offsetTop;

d .ondragstart = "return false;" d.onselectstart = "return false;" d.onselect = "document.selection.empty();"

if(o.setCapture) o.setCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

d.onmousemove = function(a)

d.onmousemove = function(a) { if(!a)a=window.event; o.style.left = a.clientX document.body.scrollLeft-x; o.style.top = a.clientY document. body.scrollTop-y; o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; o.orig_y = parseInt(o.style.top) - document.body.scrollTop; }

d.onmouseup = function() { if(o.releaseCapture) o.releaseCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove = null; d.onmouseup = null; d.ondragstart = null; d. ; d.onselect = null; o.style.cursor = "normal"; o.style.zIndex = o.orig_index; } }

if (s) { var orig_scroll = window.onscroll?window.onscroll:function (){}; window.onscroll = function () { orig_scroll() o.style.left = o.orig_x document.body.scrollLeft; o.style.top = o.orig_y document.body.scrollTop; } } } ) } var title = '提示標題'; var message='提示內容'; var TrueEvent=''; var CancelEvent=''; var CloseEvent=''; function dialogalert(title, message, TrueEvent, CancelEvent, CloseEvent) { $("#divBackground").removeClass("hidden"); $("#divMaincontent").removeClass("hidden" );

$("#alertTitle").html(title); $("#alertContent").html(message);

$("#btnSure") .click(function () { $("#divBackground").addClass("hidden"); $("#divMaincontent").addClass("hidden"); $("# btnSure").unbind("click"); if (TrueEvent) { //確認之後跳轉url window.location.href = TrueEvent; }

}); //確定

$("#btnCancel").click(function () { $("#divBackground").addClass("hidden"); $(" #divMaincontent").addClass("hidden"); $("#btnCancel").unbind("click"); if (CancelEvent) { //取消之後跳到url window.location.href = CancelEvent; } });//取消

$("#btnClose").click(function () { $("#divBackground ").addClass("hidden"); $("#divMaincontent").addClass("hidden"); $("#btnClose").unbind("click"); if (CloseEvent) { //關閉之後跳轉url window.location.href = CloseEvent; }

});//X關閉 }

$(function(){ drag("divMaincontent"); dialogalert("彈跳窗標題","彈跳窗資訊",'http://www.baidu.com/','http ://www.icode100.com/','http://bbs.icode100.com/'); });

body, p { background: none repeat scroll 0 0 #FFFFFF; color: #333333; font-size: 12px; margin: 0 padding: 0; } .hidden { display:none} .left { float:left } .right { float:right } #divMaincontent { font- family: "微軟雅黑","宋體",Microsoft Yahei,Tahoma,Arial,sans-serif; font-size: 100%; font-weight: normal; position:absolute; vertical-align: baseline; } #divMaincontent a { text-decoration:none; color:#333333;} .blackf1 { clear: both; .blackf1 { clear: both; font-size : 0; height: 12px; line-height: 12px; } .fontcolorf1 { color: #999999; } . border: 4px solid rgba(0, 0, 0, 0.1); left: 40%; position: fixed; top: 40%; width: 318px; index: 10001; } .pm_tit1 { background: url("images/dialog_blue.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0); color color color color color color color color color color color color color : #FFFFFF; height: 26px; line-height: 26px; padding: 0 1px; text-indent: 16px; width: 100%; move; } .pm_tit1 a { background: url("images/pm_bg.png") 無重複滾動0 -67px rgba(0, 0, 0, 0); 遊標：指針； 高度：20px; 右邊距：10px; 寬度：20px; } .pm_tit1 a:hover { 背景位置：0 -90px; } } 背景位置：0 -90px; } } .pm_con11 { 背景：無重複滾動 0 0 #CCCCCC; 最大高度：150px; 溢出-y：自動； 內邊距：0 1px 1px； 寬度：100%； } .pm_con2 { 背景：無重複滾動0 0 #FFFFFF; 溢出：隱藏； 內邊距：16px 0; 寬度：100%； } .pm_con2 p { margin-left: 80px; 內邊距：2px 0; 文字對齊：左； } .pm_con2 p.fontcolorf3 { 字體大小：14px; 字體粗細：粗體； } .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, . { 背景: url("images/pm_bg.png")不重複滾動0 0 rgba(0, 0, 0, 0); 顯示：內聯區塊； 高度：28px； 行高：28px; 邊距：3px 40px 0 0; 文字對齊：居中； 寬度：53px; } .pm_btn1 a:hover { 背景位置🎜>背景位置：0 -35px; 顏色：#333333; 文字裝飾：無； } 提示訊息 提示

; 今日秒殺已販售

確認 取消

腳本> 身體>

效果圖：

圖片/裡面的圖片：

dialog_blue.gif: pm_bg.png 檔案包下載：http://www.jb511. /jiaoben/112059.html

簡單漂亮的js彈窗可自由拖曳且相容於大部分瀏覽器_javascript技巧

相關文章