使用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移动div层-javascript 拖动层
Mar 22 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
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 fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
csdn 博客的css样式 v3
2009/02/24 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
python实现感知器
2017/12/19 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
python实现维吉尼亚算法
2019/03/20 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
自我鉴定三原则
2014/01/13 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL