使用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 相关文章推荐
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
jQuery实现评论模块
Aug 19 jQuery
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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
雏鹰争章活动总结
2014/05/09 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
2015年见习期工作总结
2014/12/12 职场文书
新郎结婚保证书
2015/02/26 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
跑出一片天观后感
2015/06/08 职场文书
2015年校本培训工作总结
2015/07/24 职场文书