使用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中两种链式调用实现代码
Jan 12 Javascript
Seajs的学习笔记
Mar 04 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 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
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
php+mysql查询实现无限下级分类树输出示例
2016/10/03 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
Python 编码处理-str与Unicode的区别
2016/09/06 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python多线程之事件Event的使用详解
2018/04/27 Python
flask中的wtforms使用方法
2018/07/21 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python join方法使用详解
2019/07/30 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Python表达式的优先级详解
2020/02/18 Python
pytorch SENet实现案例
2020/06/24 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
师范生个人推荐信
2013/11/29 职场文书
护士自荐信范文
2013/12/15 职场文书
便利店投资的创业计划书
2014/01/12 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
《明天,我们毕业》教学反思
2014/04/24 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python