模拟的confirm 

 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>

 

posted @ 2017-01-11 16:54  曦雨幽兰  阅读(271)  评论(0)    收藏  举报