<!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. 实现一个简易的vue的mvvm（defineProperty）

    这是一个最近一年很火的面试题,很多人看到这个题目从下手,其实查阅一些资料后,简单的模拟还是不太难的: vue不兼容IE8以下是因为他的实现原理使用了 Object.defineProperty 的ge ...

  2. 创建第一个MVC应用程序

    整个国庆期假,Insus.NET没有出门,在家静心修炼MVC.这意味着Insus.NET将来的日子里会以MVC为学习,开发,应用作为重点,不过现在才开始踏出第一步...... 路慢慢...... 下载 ...

  3. 南方IT教材反馈

    为了进一步提升教材质量,大家可以在底部留言区反馈您发现的任何问题或建议,谢谢!           最终我们将从所有读者中找出幸运读者发放奖品! 好教材也有我的一份功劳!

  4. [EWS]查找 文件夹

    摘要 有时在操作exchange的时候,需要查找用户exchange文件夹,比如用户新建了一些文件夹. 一个例子 这里以查找用户outlook邮箱中的历史对话文件夹为例. private const ...

  5. http Socket长连接

    文档:http://www.cocoachina.com/ios/20160602/16572.html socket(套接字)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元,包含进行网 ...

  6. Java 支付宝支付,退款,单笔转账到支付宝账户(单笔转账到支付宝账户)

    上次分享了支付宝订单退款的代码,今天分享一下支付宝转账的操作.  现在是有一个余额提现的功能,本来是打算做提现到银行卡的,但是客户嫌麻烦不想注册银联的开放平台账户,就说先提现到支付宝就行,二期再做银行 ...

  7. 放苹果（poj1664递归）

    ti放苹果 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24392   Accepted: 15513 Descripti ...

  8. Oracle Index 索引无效原因

    索引无效原因 最近遇到一个SQL语句的性能问题,修改功能之前的运行时间平均为0.3s,可是添加新功能后,时间达到了4~5s.虽然几张表的数据量都比较大(都在百万级以上),但是也都有正确创建索引,不知道 ...

  9. linux系统编程：获取glibc的版本号

    我的环境是ubuntu16.04 glibc官网:http://www.gnu.org/software/libc/libc.html 方法一.一般来说,涉及到库调用的程序,在链接时候都会链接到gli ...

  10. 前端面试(原生js篇) - DOM

    根据我的面试经历,一般小公司的面试环节,比较关心框架的熟练程度,以及独立开发组件的能力 但大厂通常有五轮以上的面试,而且对 js 基础语法很是看重 于是我总结了一些关于 js 基础的面试对话,有的当时 ...