使用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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
Oct 29 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP中,文件上传
2006/12/06 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
js tab 选项卡
2009/04/26 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
python实现合并两个排序的链表
2019/03/03 Python
python导入pandas具体步骤方法
2019/06/23 Python
python 6种方法实现单例模式
2020/12/15 Python
python 制作本地应用搜索工具
2021/02/27 Python
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
护理自荐信
2013/10/22 职场文书
运动会广播稿300字
2014/01/10 职场文书
学校七一活动方案
2014/01/19 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
申报材料格式
2014/12/30 职场文书
保护校园环境倡议书
2015/04/28 职场文书
党小组鉴定意见
2015/06/02 职场文书
房屋所有权证明
2015/06/19 职场文书