<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title> Simple and beautiful JS window-free Drag </title>
<script src= "Js/jquery-1.7.2.js" ></script>
<script type= "Text/javascript" >
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 is dragged with the window and 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 = ' Hint title ';
var message= ' hint 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 URL after confirmation
Window.location.href = trueevent;
}
}); Are you sure
$ ("#btnCancel"). Click (function () {
$ ("#divBackground"). AddClass ("hidden");
$ ("#divMaincontent"). AddClass ("hidden");
$ ("#btnCancel"). Unbind ("click");
if (CancelEvent) {
Jump 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;
}
});//x off
}
$ (function () {
Drag ("Divmaincontent");
Dialogalert ("Bullet window title", "Window Info", ' http://www.baidu.com/', ' http://www.icode100.com/', ' http://bbs.icode100.com/');
});
</script>
<style type= "Text/css" >
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 James Black", "XXFarEastFont-Arial", 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;
}
</style>
<body>
<div class= "Pm_main hidden" id= "divmaincontent" >
<div class= "pm_tit1" ><span class= "left" > Hint information </span><a class= "right" id= "Btnclose" Javascript:void (0) "></a></div>
<div class= "Pm_con1" >
<div class= "Pm_con2" >
<p id= "Alerttitle" > Tips </p>
<p class= "Fontcolorf1" id= "alertcontent" > Today seconds Kill sold out </p>
<div class= "Blackf1" ></div>
<div class= "Register_linef1" ></div>
<p class= "pm_btn1" ><a id= "btnsure" href= "javascript:void (0)" > Confirmation </a><a id= "BtnCancel" Javascript:void (0) "> Cancel </a></p>
</div>
</div>
</div>
<script>
</script>
</body>
