Click the pop-up layer of the imitation QQ mailbox, and a confirmation box is displayed.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> pop-up layer of QQ mail </TITLE>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style>
Body {
Background: none repeat scroll 0 0 # FFFFFF;
Font-family: "lucida Grande", Verdana;
Font-size: 12px;
}
Select, body, textarea {
Font-size: 12px;
}
. Tipbg {
Margin: 0;
Padding: 0;
Background-color: transparent;
}
. Qmpanel_shadow {
Border-radius: 3px 3px 3px 3px;
Box-shadow: 0 2px 7px rgba (0, 0, 0, 0.35 );
}
. Bd_upload {
Border: 1px solid # 628D0B;
}
. Bd_upload {
Border: 1px solid # 628D0B;
}
. Fdbody {
Border-left: 8px solid # FFFFFF;
Border-right: 1px solid # 87A34D;
}
. Fdbody,. tipstitle {
Background: none repeat scroll 0 0 #9BBB59;
}
. Editor_dialog_title {
Color: white;
Font: bold 12px "lucida Grande", Verdana;
Padding: 9px 0 7px 10px;
Text-align: left;
}
. Editor_dialog_content {
Background: none repeat scroll 0 0 # FFFFFF;
Filter: none;
Margin: 0;
Padding: 0;
Text-align: center;
}
. Mailinfo {
Border-bottom: 2px solid # FFFFFF;
}
. Mailinfo {
Background: none repeat scroll 0 0 # FFFFFF;
}
. Cnfx_content {
Padding: 10px 0 5px 10px;
Text-align: left;
}
. Cnfx_status {
Float: left;
Padding: 0 0 0 10px;
}
. Cnfx_btn {
Padding: 0 10px 10px 0;
Text-align: right;
}
. B _size {
Font-size: 14px;
}
. Editor_close {
Background: none repeat scroll 0 0 # DC4835;
}
/** When mouseover, add editor_close_mover */
. Editor_close,. editor_close_mover {
Border: 1px solid # a70000f;
Cursor: pointer;
Float: right;
Margin: 7px 7px 0 0;
}
. Editor_close img,. editor_close_mover img,. editor_min img,. editor_min_mover img {
Display: block;
}
Img {
Border: medium none;
}
. Wd2 {
Margin: 1px 1px 0 0;
Width: 64px;
}
. Btn, button,. qm_btn {
Padding-left: 0;
Padding-right: 0;
}
Input, textarea, {
Outline: medium none;
}
. Editor_mask {
Background: none repeat scroll 0 0 # FFFFFF;
Height: 100%;
Left: 0;
Opacity: 0.5;
Position: absolute;
Top: 0;
Width: 100%;
}
</Style>
<Script>
/////// Drag the tool class ////////
Var DragUtil = (function (){
Var doc = document;
Var moveX = 0;
Var moveY = 0;
Var moveTop = 0;
Var moveLeft = 0;
Var moveable = false;
Return {
/**
* Register and drag
* The id of the entire form and the title must be input.
*/
Regist: function (winId, titleId ){
// Add the following content to the page header:
// <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
// Otherwise there will be problems
Var width = doc.doc umentElement. clientWidth;
Var height = doc.doc umentElement. clientHeight;
Var title = doc. getElementById (titleId );
Var win = doc. getElementById (winId );
Title. onmousedown = function (){
Var evt = DragUtil. _ getEvent ();
Moveable = true;
MoveX = evt. clientX;
MoveY = evt. clientY;
MoveTop = parseInt (win. style. top );
MoveLeft = parseInt (win. style. left );
Doc. onmousemove = function (){
If (moveable ){
Var evt = DragUtil. _ getEvent ();
Var x = moveLeft + evt. clientX-moveX;
Var y = moveTop + evt. clientY-moveY;
Var w = parseInt (win. style. width );
Var h = parseInt (win. style. height );
If (x> 0 & (x + w <width) & y> 0 & (y + h Win. style. left = x + "px ";
Win. style. top = y + "px ";
}
}
};
Doc. onmouseup = function (){
If (moveable ){
// Doc. onmousemove = docMouseMoveEvent;
// Doc. onmouseup = docMouseUpEvent;
Moveable = false;
MoveX = 0;
MoveY = 0;
MoveTop = 0;
MoveLeft = 0;
}
};
}
}
/**
* Get events
*/
, _ GetEvent: function (){
Return window. event | arguments. callee. caller. arguments [0];
}
}
})()
///////////////////////
Function init (){
DragUtil. regist ("WindowId", "titleId ")
DragUtil. regist ("incluwid2", "titleId2 ")
}
</Script>
</HEAD>
<BODY onload = "init ()">
<Span id = "qmdialog_container"> <div
Style = "z-index: 1120; position: absolute; width: 447px; height: 163px; opacity: 1; left: 514px; top: 124px; margin-top: 0pt ;"
Class = "" id = "WindowId" qmanimation_play = "| undefined">
<Div class = "tipbg">
<Div style = "background: # DDD;" class = "opashowOuter qmpanel_shadow"
Id = "QMconfirm ___ opashow _">
<Table cellspacing = "0" cellpadding = "0"
Style = "width: 447px; height: 163px; background: white ;"
Class = "bd_upload">
<Tbody>
<Tr>
<Td
Style = "height: 28px; border: none; background-image: none; cursor: move; overflow: hidden ;"
Class = "editor_dialog_titlebar fdbody"
Id = "QMconfirm ___ title_td _"> <div
Id = "QMconfirm ___ title_div _"
Style = "cursor: default; float: right; width: 40px; border: none; background-image: none ;"
Class = "fdbody">
<Div onmouseout = "this. className = 'editor _ close ';"
Onmouseover = "this. className = 'editor _ close_mover ';"
Class = "editor_close" id = "QMconfirm ___ closebtn2 _">
</Div>
</Div>
<Div id = "titleId" class = "editor_dialog_title"> confirm deletion </div>
</Td>
</Tr>
<Tr>
<Td valign = "top"
Style = "height: pixel PX; border: medium none; visibility: visible ;"
Class = "editor_dialog_content" id = "QMconfirm ___ content _"> <div
Class = "mailinfo"
Style = "border: none; height: 100%; display: inline;">
<Div class = "">
<Div class = "cnfx_content">
Style = "float: left; margin: 5px 10px 0; display: block ;"
Src = "http://www.codefans.net/jscss/demoimg/201109/ico_question.gif">
<Table style = "width: 350px; height: 80px;">
<Tbody>
<Tr>
<Td style = "vertical-align: top;"> <div class = "B _size"
Style = "padding-top: 10pixels; word-break: break-all; line-height: 150%;">
<Div> after the email is permanently deleted, the email cannot be restored. Are you sure you want to delete it? </Div>
</Div> </td> </tr> </tbody>
</Table>
</Div>
<Div style = "display: none;" class = "cnfx_status">
<Input type = "checkbox" id = "QMconfirm _ recordstatus"> <label
For = "QMconfirm _ recordstatus"> </label>
</Div>
<Div class = "cnfx_btn">
<Input type = "button" value = "OK" id = "QMconfirm _ confirm"
Class = "wd2 btn"> <input type = "button" value = "cancel"
Style = "display:;" id = "QMconfirm _ cancel" class = "wd2 btn"> <input
Type = "button" value = "" style = "display: none ;"
Id = "QMconfirm _ never" class = "wd2 btn">
</Div>
</Div>
</Div>
</Td>
</Tr>
</Tbody>
</Table>
</Div>
</Div>
</Div>
</Span>
<Span id = "qmdialog_container"> <div
Style = "z-index: 1120; position: absolute; width: 447px; height: 163px; opacity: 1; left: 514px; top: 324px; margin-top: 0pt ;"
Class = "" id = "incluwid2" qmanimation_play = "| undefined">
<Div class = "tipbg">
<Div style = "background: # DDD;" class = "opashowOuter qmpanel_shadow"
Id = "QMconfirm ___ opashow _">
<Table cellspacing = "0" cellpadding = "0"
Style = "width: 447px; height: 163px; background: white ;"
Class = "bd_upload">
<Tbody>
<Tr>
<Td
Style = "height: 28px; border: none; background-image: none; cursor: move; overflow: hidden ;"
Class = "editor_dialog_titlebar fdbody"
Id = "QMconfirm ___ title_td _"> <div
Id = "QMconfirm ___ title_div _"
Style = "cursor: default; float: right; width: 40px; border: none; background-image:
None ;"
Class = "fdbody">
<Div onmouseout = "this. className = 'editor _ close ';"
Onmouseover = "this. className = 'editor _ close_mover ';"
Class = "editor_close" id = "QMconfirm ___ closebtn2 _">
Src = "http://www.codefans.net/jscss/demoimg/201109/ico_closetip.gif">
</Div>
</Div>
<Div id = "titleId2" class = "editor_dialog_title"> confirm deletion </div>
</Td>
</Tr>
<Tr>
<Td valign = "top"
Style = "height: pixel PX; border: medium none; visibility: visible ;"
Class = "editor_dialog_content" id = "QMconfirm ___ content _"> <div
Class = "mailinfo"
Style = "border: none; height: 100%; display: inline;">
<Div class = "">
<Div class = "cnfx_content">
Style = "float: left; margin: 5px 10px 0; display: none ;"
Src = "http://www.codefans.net/jscss/demoimg/201109/ico_question.gif">
<Table style = "width: 350px; height: 80px;">
<Tbody>
<Tr>
<Td style = "vertical-align:
Top; "> <div class =" B _size"
Style = "padding-top: 10pixels; word-break: break-all; line-height: 150%;">
<Div> delete permanently
The email cannot be restored. Are you sure you want to delete it? </Div>
</Div>
</Td>
</Tr>
</Tbody>
</Table>
</Div>
<Div style = "display: none;" class = "cnfx_status">
<Input type = "checkbox" id = "QMconfirm _ recordstatus"> <label
For = "QMconfirm _ recordstatus"> </label>
</Div>
<Div class = "cnfx_btn">
<Input type = "button" value = "OK" id = "QMconfirm _ confirm"
Class = "wd2 btn"> <input type = "button" value = "cancel"
Style = "display:;" id = "QMconfirm _ cancel" class = "wd2
Btn "> <input
Type = "button" value = "" style = "display: none ;"
Id = "QMconfirm _ never" class = "wd2 btn">
</Div>
</Div>
</Div>
</Td>
</Tr>
</Tbody>
</Table>
</Div>
</Div>
</Div>
</Span>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
</BODY>
</HTML>