<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8"/>

     <title>模拟的confirm</title>

     <link href="css/global.css" rel="stylesheet"/>

   <!--   confirm的重写 -->

    <script type="text/javascript">

     //网页被卷去的上高度

     function EV_myScrollTop(){

         var n=window.pageYOffset

                 || document.documentElement.scrollTop

                 || document.body.scrollTop || 0;

         return n;

     }

     //网页被卷去的左宽度

     function EV_myScrollLeft(){

         var n=window.pageXOffset

                 || document.documentElement.scrollLeft

                 || document.body.scrollLeft || 0;

         return n;

     }

     //网页可见区域宽

     function EV_myClientWidth(){

         var n=document.documentElement.clientWidth

                 || document.body.clientWidth || 0;

         return n;

     }

     //网页可见区域高

     function EV_myClientHeight(){

         var n=document.documentElement.clientHeight

                 || document.body.clientHeight || 0;

         return n;

     }

     function zg(){

         var bgObj=document.getElementById("zg");

         var bgWidth=EV_myClientWidth();

         var bgHeight=EV_myClientHeight();

         var bgTop=EV_myScrollTop();

         var bgLeft=EV_myScrollLeft();

         bgObj.style.position   = "absolute";

         bgObj.style.top        = bgTop+"px";

         bgObj.style.left       = bgLeft+"px";

         bgObj.style.width      = bgWidth + "px";

         bgObj.style.height     = bgHeight + "px";

         //bgObj.style.zIndex     = "-10000";

         bgObj.style.background = "#000";

         bgObj.style.filter     = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60,finishOpacity=60);";

         bgObj.style.opacity    = "0.5";

     }

     function show_cr(){

         if (document.getElementById('show')==null){

             var sh=document.createElement("div");

             sh.setAttribute('class','wrap');

             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>";

             document.body.appendChild(sh);

         }

     }

     function zg_cr() {

         var bgObj=document.createElement("div");

         bgObj.setAttribute('id','zg');

         document.body.appendChild(bgObj);

     }

     function dj(url) {

         show_cr();

         zg_cr();

         zg();

        var so=document.getElementById("show");

         var bgObj=document.getElementById("zg");

         so.style.display="block";

        var su =document.getElementById("sure");

         su.onclick =function () {

            window.location.href=url;

         };

       var qx =document.getElementById("qx");

         qx.onclick =function () {

         so.style.display="none";

             document.body.removeChild(bgObj);

         }

  }

 </script>

 <style type="text/css">

 /*confirm的样式*/

 .tc{text-align:center;}

 .wrap{position:fixed;top:35%;left:0;width:100%;z-index: 1000;}

 #show{width:260px;height: 150px;margin: 0 auto;background:#fff;border-radius:10px;}

 .show-title{border-radius:10px 10px 0 0;text-align:center;line-height:40px;background-color:#3586BC;color: #fff;font-weight: normal; }

 .show-con{padding: 10px 0; text-align:center;text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }

 .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;}

 .show-btn:hover{background-color: transparent;color: #3586BC;transition: 0.4s;}

 </style>

 </head>

 <body>

 <button  onclick="dj('https://www.baidu.com')" >确定退出</button>

 </body>

 </html>

模拟的confirm的更多相关文章

  1. 如何模拟alert/confirm/prompt实现阻断程序运行

    场景:在执行js的时候,我们希望运行到某处,进行用户交互,根据交互的内容,运行下面的程序:下面的js程序需要用的和用户交互的内容,所以,和用户交互时,后面的程序必须停止运行 方案: 1. 原生的ale ...

  2. Selenium WebDriver- 操作JavaScript的confirm弹窗

    #encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...

  3. 【webdriver自动化】整理API框架（主要是关键字，具体例子在本地）

    1. 获取网页源码 pageSource = self.driver.page_source print pageSource.encode("gbk","ignore& ...

  4. rabbitmq如何保证消息可靠性不丢失

    目录 生产者丢失消息 代码模拟 事务 confirm模式确实 数据退回监听 MQ事务相关软文推荐 MQ丢失信息 消费者丢失信息 之前我们简单介绍了rabbitmq的功能.他的作用就是方便我们的消息解耦 ...

  5. [转]jQuery插件实现模拟alert和confirm

    本文转自:http://www.jb51.net/article/54577.htm (function () { $.MsgBox = { Alert: function (title, msg) ...

  6. 模拟alert和confirm

    啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了... 来看插件的实现代码吧: (function () { $ ...

  7. JS模拟Alert与Confirm对话框

    这2个例子都是用原生JS写的,主要是用JS拼接了界面,并未做过多的事件监听.,样式用了Css3的一些特性. 调用方式则为: //Alert Alert.show('我警告你哦~'); //Confir ...

  8. 模拟alert，confirm 阻塞状态

    /*** * 模拟alert弹窗 * content 为弹框显示的内容 * 确定按钮对应的下面取消关闭显示框 * **/function oAlert(content) { var oWrap = $ ...

  9. 自编jQuery插件实现模拟alert和confirm

    现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了自己定制一个的想法...... 啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的al ...

随机推荐

  1. Quartz2D截屏

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  2. WPF--模板选择

               典型的,把模板关联到一块特定的数据上,不过通常希望动态的确定使用哪个模板---既可以基于一个属性值,也可以是一个全局状态.当真正需要大规模替换模板时,也可以使用DataTempl ...

  3. AuthenticationManager、ProviderManager

    本篇主要讲述以下几点: 1.AuthenticationManager.ProviderManager和AuthenticationProvider三者之间的关系 2.以UsernamePasswor ...

  4. 还是畅通工程（hdu1233）并查集应用

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  5. python基础技巧综合训练题2

    1,判断一个字符串中的每一个字母是否都在另一个字符串中,可以利用集合的特性来解,集合的元素如果存在,再次更新(update) 是添加不进集合的,那么集合的长度还是跟原来一样,如果添加进去,集合长度就会 ...

  6. HDU2389(KB10-F 二分图最大匹配Hopcroft_Karp)

    Rain on your Parade Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 655350/165535 K (Java/Ot ...

  7. zsh: command not found: pip 解决方法

    出现zsh: command not found: xxx解决方法: 把 bash shell 中.bash_profile 全部环境变量加入zsh shell里就好 step1: Term执行 op ...

  8. Python 多线程、多进程 （二）之 多线程、同步、通信

    Python 多线程.多进程 (一)之 源码执行流程.GIL Python 多线程.多进程 (二)之 多线程.同步.通信 Python 多线程.多进程 (三)之 线程进程对比.多线程 一.python ...

  9. js-ES6学习笔记-Generator函数

    1.Generator 函数是 ES6 提供的一种异步编程解决方案.形式上,Generator 函数是一个普通函数,但是有两个特征.一是,function关键字与函数名之间有一个星号:二是,函数体内部 ...

  10. AngularJS图片上传功能实践

    逻辑理清楚了:service提供FileReader函数,directive提供点击事件的绑定和监听,controller用来修改html上的ng-src属性值 1.HTML <input ty ...