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.5)","-moz-opacity": "0.5","filter": "alpha(opacity=50)","z-index": "97",});
css(MainDiv,"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","position": "absolute","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的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
