<!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. UIView动画上

    主要参考:http://blog.csdn.net/huifeidexin_1/article/details/7597868  http://www.2cto.com/kf/201409/33566 ...

  2. 并发编程 —— ScheduledThreadPoolExecutor

    1. 前言 在前面的文章中,我们介绍了定时任务类 Timer ,他是 JDK 1.3 中出现的,位于 java.util 包下.而今天说的 ScheduledThreadPoolExecutor的是在 ...

  3. Git-分支创建、拉取、切换

    git新建本地分支命令 1.创建本地分支 git branch 分支名,例如:git branch 2.0.1.20120806 注:2.0.1.20120806是分支名称,可以随便定义. 2.创建远 ...

  4. C++为啥要使用new

    1.为什么要有new? 为什么要有new?为什么要动态创建对象?为什么有时候不用new,有时候又用new,比如: // Cocos2d-x3.x的Value类,大家都很熟悉了 Value v = Va ...

  5. 【手记】解决Resharper 2018.x起本机license server不能用的问题

    ReSharper升级到2018版后,一直用的好好的本机license server(下称LS)不能用了,报The license server address is incorrect....在网上 ...

  6. Java多线程编程之单例模式

    延迟加载:“懒汉模式” 延迟加载是指在调用getInstance()方法时创建实例.常见的方法是在getInstance()方法中实例化new.实现代码如下: 但是因为getInstance()中有多 ...

  7. Redis-五种数据类型解析

    redis 五种数据结构详解(string,list,set,zset,hash) Redis不仅仅支持简单的key-value类型的数据,同时还提供list,set,zset,hash等数据结构的存 ...

  8. HUST1017(KB3-A Dancing links)

    1017 - Exact cover Time Limit: 15s Memory Limit: 128MB Special Judge Submissions: 7270 Solved: 3754 ...

  9. 【代码笔记】iOS-MBProgressHUD-Demo

    一,工程图. 二,代码. ViewController.m #import "ViewController.h" #import "MBProgressHUD.h&quo ...

  10. 【代码笔记】iOS-NSFileManager

    一,代码. #import "ViewController.h" @interface ViewController () @end @implementation ViewCon ...