使用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 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
js分页代码分享
Apr 28 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
AngularJS快速入门
Apr 02 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
基于javascript实现碰撞检测
Mar 12 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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调用mysql数据 dbclass类
2011/05/07 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
node跨域请求方法小结
2017/08/25 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
Vue项目打包编译优化方案
2020/09/16 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
在Django中创建动态视图的教程
2015/07/15 Python
django中的setting最佳配置小结
2017/11/21 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
工作时间上网检讨书
2014/02/03 职场文书
春节超市活动方案
2014/08/14 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
Node实现搜索框进行模糊查询
2021/06/28 Javascript