1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8"/>
5 <title>模拟的confirm</title>
6 <link href="css/global.css" rel="stylesheet"/>
7 <!-- confirm的重写 -->
8 <script type="text/javascript">
9 //网页被卷去的上高度
10 function EV_myScrollTop(){
11 var n=window.pageYOffset
12 || document.documentElement.scrollTop
13 || document.body.scrollTop || 0;
14 return n;
15 }
16 //网页被卷去的左宽度
17 function EV_myScrollLeft(){
18 var n=window.pageXOffset
19 || document.documentElement.scrollLeft
20 || document.body.scrollLeft || 0;
21 return n;
22 }
23 //网页可见区域宽
24 function EV_myClientWidth(){
25 var n=document.documentElement.clientWidth
26 || document.body.clientWidth || 0;
27 return n;
28 }
29 //网页可见区域高
30 function EV_myClientHeight(){
31 var n=document.documentElement.clientHeight
32 || document.body.clientHeight || 0;
33 return n;
34 }
35 function zg(){
36 var bgObj=document.getElementById("zg");
37 var bgWidth=EV_myClientWidth();
38 var bgHeight=EV_myClientHeight();
39 var bgTop=EV_myScrollTop();
40 var bgLeft=EV_myScrollLeft();
41 bgObj.style.position = "absolute";
42 bgObj.style.top = bgTop+"px";
43 bgObj.style.left = bgLeft+"px";
44 bgObj.style.width = bgWidth + "px";
45 bgObj.style.height = bgHeight + "px";
46 //bgObj.style.zIndex = "-10000";
47 bgObj.style.background = "#000";
48 bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60,finishOpacity=60);";
49 bgObj.style.opacity = "0.5";
50 }
51 function show_cr(){
52 if (document.getElementById('show')==null){
53 var sh=document.createElement("div");
54 sh.setAttribute('class','wrap');
55 sh.innerHTML="<div id=\'show\' ><h3 class=\' show-title\'>提示：</h3><p class=\' show-con\'>确定要跳转</p><div class=\'tc\'><a id=\'sure\' class=\'show-btn\'>确定</a><a id=\'qx\' class=\' show-btn\'>取消</a></div></div>";
56 document.body.appendChild(sh);
57 }
58 }
59 function zg_cr() {
60 var bgObj=document.createElement("div");
61 bgObj.setAttribute('id','zg');
62 document.body.appendChild(bgObj);
63 }
64 function dj(url) {
65 show_cr();
66 zg_cr();
67 zg();
68 var so=document.getElementById("show");
69 var bgObj=document.getElementById("zg");
70 so.style.display="block";
71 var su =document.getElementById("sure");
72 su.onclick =function () {
73 window.location.href=url;
74 };
75 var qx =document.getElementById("qx");
76 qx.onclick =function () {
77 so.style.display="none";
78 document.body.removeChild(bgObj);
79 }
80 }
81 </script>
82 <style type="text/css">
83 /*confirm的样式*/
84 .tc{text-align:center;}
85 .wrap{position:fixed;top:35%;left:0;width:100%;z-index: 1000;}
86 #show{width:260px;height: 150px;margin: 0 auto;background:#fff;border-radius:10px;}
87 .show-title{border-radius:10px 10px 0 0;text-align:center;line-height:40px;background-color:#3586BC;color: #fff;font-weight: normal; }
88 .show-con{padding: 10px 0; text-align:center;text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
89 .show-btn{display: inline-block;padding: 5px 25px ;color: #fff;border-radius:5px;border: 2px solid #3586BC;background-color: #3586BC;text-decoration: none;transition: 0.4s;margin: 0 10px;}
90 .show-btn:hover{background-color: transparent;color: #3586BC;transition: 0.4s;}
91 </style>
92 </head>
93 <body>
94 <button onclick="dj('https://www.baidu.com')" >确定退出</button>
95 </body>
96 </html>
