简单漂亮的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=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>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.onselectstart = null; <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>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>font-size: 0; <BR>height: 12px; <BR>line-height: 12px; <BR>} <BR>.fontcolorf1 { <BR>color: #999999; <BR>} <BR>.pm_main { <BR>border: 4px solid rgba(0, 0, 0, 0.1); <BR>left: 40%; <BR>position: fixed; <BR>top: 40%; <BR>width: 318px; <BR>z-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: #FFFFFF; <BR>height: 26px; <BR>line-height: 26px; <BR>padding: 0 1px; <BR>text-indent: 16px; <BR>width: 100%; <BR>cursor:move; <BR>} <BR>.pm_tit1 a { <BR>background: url("images/pm_bg.png") no-repeat scroll 0 -67px rgba(0, 0, 0, 0); <BR>cursor: pointer; <BR>height: 20px; <BR>margin-right: 10px; <BR>width: 20px; <BR>} <BR>.pm_tit1 a:hover { <BR>background-position: 0 -90px; <BR>} <BR>.pm_con1 { <BR>background: none repeat scroll 0 0 #CCCCCC; <BR>max-height: 150px; <BR>overflow-y: auto; <BR>padding: 0 1px 1px; <BR>width: 100%; <BR>} <BR>.pm_con2 { <BR>background: none repeat scroll 0 0 #FFFFFF; <BR>overflow: hidden; <BR>padding: 16px 0; <BR>width: 100%; <BR>} <BR>.pm_con2 p { <BR>margin-left: 80px; <BR>padding: 2px 0; <BR>text-align: left; <BR>} <BR>.pm_con2 p.fontcolorf3 { <BR>font-size: 14px; <BR>font-weight: bold; <BR>} <BR>.pm_btn1 a, .pm_btn1 a:link, .pm_btn1 a:visited, .pm_btn1 a:hover, .pm_btn1 a:active { <BR>background: url("images/pm_bg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); <BR>display: inline-block; <BR>height: 28px; <BR>line-height: 28px; <BR>margin: 3px 40px 0 0; <BR>text-align: center; <BR>width: 53px; <BR>} <BR>.pm_btn1 a:hover { <BR>background-position: 0 -35px; <BR>color: #333333; <BR>text-decoration: none; <BR>} <BR> 提示信息 提示 今日秒杀已售罄 确认取消 <br><br> 效果图片: images/里面的图片: dialog_blue.gif: pm_bg.png 文件包下载: http://www.jb51.net/jiaoben/112059.html