JavaScript

超轻量级php框架startmvc

使用JavaScript实现alert的实例代码

更新时间:2020-05-22 16:48:01 作者:startmvc
废话不多说了,直接给大家贴代码了,具体代码如下所示:<script>window.alert=alert;functiona

废话不多说了,直接给大家贴代码了,具体代码如下所示:


<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的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

js 实现alert