Simple and beautiful js pop-up window can be dragged freely and is compatible with most browsers_javascript skills

Simple and beautiful js pop-up window - free drag and drop

Copy code The code is as follows: Simple and beautiful js pop-up window - free drag //Author: zhao jinhan // Time: October 22, 2013 //Email: xb_zjh@126.com function drag(o,s) { //drag(obj [,scroll]); //obj: the id of the object or the object itself; //scroll (optional): whether the object slides as the window is dragged, the default is no

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 = 'Prompt title'; var message='Prompt content'; 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) { //Jump to url after confirmation window.location.href = TrueEvent; }

}); //OK

$("#btnCancel").click(function () { $("#divBackground"). addClass("hidden"); $("#divMaincontent").addClass("hidden"); $("#btnCancel").unbind("click"); if (CancelEvent) { //Jump to url after cancellation window.location.href = CancelEvent; } });//Cancel

$("#btnClose").click (function () { $("#divBackground").addClass("hidden"); $("#divMaincontent").addClass("hidden"); $("#btnClose" ).unbind("click"); if (CloseEvent) { //Jump url after closing window.location.href = CloseEvent; }

}) ;// ://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","宋体",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