使用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 有趣而诡异的数组
Apr 06 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
layui动态表头的实现代码
Aug 22 Javascript
Postman参数化实现过程及原理解析
Aug 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
一个取得文件扩展名的函数
2006/10/09 PHP
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
openPNE常用方法分享
2011/11/29 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
保安岗位职责
2014/02/21 职场文书
实习生岗位职责
2014/04/12 职场文书
城市创卫标语
2014/06/17 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
作弊检讨书范文
2015/05/06 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
python中使用redis用法详解
2022/12/24 Redis