<!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. Spring <context:component-scan>标签属性 use-default-filters 以及子标签 include-filter使用说明

    Spring <context:component-scan>标签作用有很多,最基本就是 开启包扫描,可以使用@Component.@Service.@Component等注解: 今天要作 ...

  2. 几种常见算法的Python实现

    1.选择排序 选择排序是一种简单直观的排序算法.它的原理是这样:首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的后 ...

  3. HDU 1242 Rescue(BFS+优先队列)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1242 题目描述: Problem Description Angel was caught by t ...

  4. Postman中使用post方式调用接口

    选择body-row,输入data

  5. WPF备忘录（3）如何从 Datagrid 中获得单元格的内容与 使用值转换器进行绑定数据的转换IValueConverter

    一.如何从 Datagrid 中获得单元格的内容 DataGrid 属于一种 ItemsControl, 因此,它有 Items 属性并且用ItemContainer 封装它的 items. 但是,W ...

  6. Visual Studio 命令提示符

    Visual Studio 命令提示和 SDK 命令提示会自动设置环境变量,使您能够轻松使用 .NET Framework 工具. 在 .NET Framework 4 版 和更高版本中,应使用 Vi ...

  7. HLOCAL 初探

    首先看一段程序,输出的结果为两个相同的整数(这两个整数是内存地址). #include "stdafx.h" #include <windows.h> int _tma ...

  8. 方程整数解-2015省赛C语言A组第一题

    方程整数解 方程: a^2 + b^2 + c^2 = 1000(或参见[图1.jpg])这个方程有整数解吗?有:a,b,c=6,8,30 就是一组解.你能算出另一组合适的解吗? 请填写该解中最小的数 ...

  9. Java开发中常用的设计模式(一)---工厂模式

    一. 准备工作 1. 本文参考自  自己理解的工厂模式,希望对大家有所帮助 二. 开始 以汽车工厂为例,首先有个汽车类的接口 Car,里面有个开车的方法 drive(),然后有个宝马车的类 BMW 和 ...

  10. redis下载地址

    redisgithub下载地址:https://github.com/MicrosoftArchive/redis进入之后,如下所示进行下载. 进入页面进行选择版本下载. ,下载好之后,在本地解压如下 ...