使用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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
js function使用心得
May 10 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
javascript动画浅析
Aug 30 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
详解express使用vue-router的history踩坑
Jun 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学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
JavaScript类继承及实例化的方法
2015/07/25 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Sanic框架应用部署方法详解
2018/07/18 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
企业消防安全制度
2014/02/02 职场文书
生日宴会策划方案
2014/06/03 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
社区端午节活动总结
2015/02/11 职场文书
学生会干部任命书
2015/09/21 职场文书
导游词之桂林
2019/08/20 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers