使用JavaScript实现alert的实例代码


Posted in Javascript onJuly 06, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<script> 
  window.alert = alert; 
  function alert(data) { 
    var MainDiv = document.createElement("div"), 
      p = document.createElement("p"), 
      AllPage = document.createElement("div"), 
      btn = document.createElement("div"), 
      textNode = document.createTextNode(data ? data : ""), 
      btnText = document.createTextNode("确定"); 
    // 控制样式 
    css(AllPage, { 
      "position": "fixed", 
      " _position": "absolute", 
      " width": "100%", 
      "height": "100%", 
      "left": "0", 
      "top": "0", 
      "background": "rgba(0, 0, 0,0.5)", 
      "-moz-opacity": "0.5", 
      "filter": "alpha(opacity=50)", 
      "z-index": "97", 
    }); 
    css(MainDiv, { 
      "position": "fixed", 
      "left": "0", 
      "right": "0", 
      "top": "30%", 
      "width": "14rem", 
      "height": "5rem", 
      "padding-top":"0.5rem", 
      "margin": "0 auto", 
      "background-color": "white", 
      "font-size": "0.75rem", 
      "text-align": "center", 
      "position": "relative", 
      "border-radius": "5px 5px 5px 5px", 
    }); 
    css(btn, { 
      "background": "#de241b", 
      "color": "white", 
      "width": "6rem", 
      "margin-left": "4rem", 
      "margin-bottom":"0.25rem", 
      "height": "1.5rem", 
      "border-radius": "5px 5px 5px 5px", 
      "position": "absolute", 
      "padding-top":"0.5rem", 
      "bottom":"0", 
    }) 
    // 内部结构套入 
    p.appendChild(textNode); 
    btn.appendChild(btnText); 
    MainDiv.appendChild(p); 
    MainDiv.appendChild(btn); 
    AllPage.appendChild(MainDiv); 
    // 整体显示到页面内 
    document.getElementsByTagName("body")[0].appendChild(AllPage); 
    //禁止滚动 
    $("body").on("touchmove", function (event) { 
      event.preventDefault; 
    }, false) 
    // 确定绑定点击事件删除标签 
    btn.onclick = function () { 
      AllPage.parentNode.removeChild(AllPage); 
      //启用滚动 
      $("body").off("touchmove"); 
    } 
  } 
  function css(targetObj, cssObj) { 
    var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : ""; 
    for (var i in cssObj) { 
      str += i + ":" + cssObj[i] + ";"; 
    } 
    targetObj.style.cssText = str; 
  }

以上所述是小编给大家介绍的使用JavaScript实现alert的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
js转义字符介绍
Nov 05 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 #Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 #Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 #Javascript
详解微信小程序Radio选中样式切换
Jul 06 #Javascript
Node.js 回调函数实例详解
Jul 06 #Javascript
详解vue渲染从后台获取的json数据
Jul 06 #Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 #Javascript
You might like
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
Js四则运算函数代码
2012/07/21 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
JavaScript函数定义方法实例详解
2019/03/05 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
vue编写简单的购物车功能
2021/01/08 Vue.js
python 从远程服务器下载东西的代码
2013/02/10 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
Python多线程多进程实例对比解析
2020/03/12 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
企业管理毕业生求职信
2014/03/11 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
2014年商场工作总结
2014/11/22 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python