简单漂亮的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=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) { 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.onselectstart = null; 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; font-size: 0; height: 12px; line-height: 12px; } .fontcolorf1 { color: #999999; } .pm_main { border: 4px solid rgba(0, 0, 0, 0.1); left: 40%; position: fixed; top: 40%; width: 318px; z-index: 10001; } .pm_tit1 { background: url("images/dialog_blue.gif") repeat-x scroll 0 0 rgba(0, 0, 0, 0); color: #FFFFFF; height: 26px; line-height: 26px; padding: 0 1px; text-indent: 16px; width: 100%; cursor:move; } .pm_tit1 a { background: url("images/pm_bg.png") no-repeat scroll 0 -67px rgba(0, 0, 0, 0); cursor: pointer; height: 20px; margin-right: 10px; width: 20px; } .pm_tit1 a:hover { background-position: 0 -90px; } .pm_con1 { background: none repeat scroll 0 0 #CCCCCC; max-height: 150px; overflow-y: auto; padding: 0 1px 1px; width: 100%; } .pm_con2 { background: none repeat scroll 0 0 #FFFFFF; overflow: hidden; padding: 16px 0; width: 100%; } .pm_con2 p { margin-left: 80px; padding: 2px 0; text-align: left; } .pm_con2 p.fontcolorf3 { font-size: 14px; font-weight: bold; } .pm_btn1 a, .pm_btn1 a:link, .pm_btn1 a:visited, .pm_btn1 a:hover, .pm_btn1 a:active { background: url("images/pm_bg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); display: inline-block; height: 28px; line-height: 28px; margin: 3px 40px 0 0; text-align: center; width: 53px; } .pm_btn1 a:hover { background-position: 0 -35px; color: #333333; text-decoration: none; }

提示信息 提示

今日秒杀已售罄

确认 取消

效果图片： images/里面的图片：

dialog_blue.gif: pm_bg.png 文件包下载： http://www.jb51.net/jiaoben/112059.html

简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器_javascript技巧

Articles Liés