使用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 相关文章推荐
jquery easyui combox一些实用的小方法
Dec 25 Javascript
Java中Timer的用法详解
Oct 21 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
Postman内建变量常用方法实例解析
Jul 28 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中动态显示签名和ip原理
2007/03/28 PHP
php中防止恶意刷新页面的代码小结
2012/10/31 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
Python三元运算实现方法
2015/01/12 Python
python引用DLL文件的方法
2015/05/11 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
numpy中索引和切片详解
2017/12/15 Python
python实现维吉尼亚加密法
2019/03/20 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
接口可以包含哪些成员
2012/09/30 面试题
机械制造毕业生求职信
2014/03/03 职场文书
分公司经理任命书
2014/06/05 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
七一表彰大会简报
2015/07/20 职场文书
教学副校长工作总结
2015/08/13 职场文书