使用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 相关文章推荐
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
ES6 Array常用扩展的应用实例分析
Jun 26 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
用 PHP5 轻松解析 XML
2006/12/04 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
php实现上传图片文件代码
2015/07/19 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
详解Python中DOM方法的动态性
2015/04/11 Python
Python3实现Web网页图片下载
2016/01/28 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
Python实现基本线性数据结构
2016/08/22 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python输出数学符号实例
2020/05/11 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
python用700行代码实现http客户端
2021/01/14 Python
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
商场经理竞聘演讲稿
2014/01/01 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
学雷锋倡议书
2015/01/19 职场文书
工作保证书怎么写
2015/02/28 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server