使用JavaScript實現(xiàn)alert的實例代碼
更新時間：2017年07月06日 16:33:55 作者：int_Major
本文通過實例代碼給大家介紹了js實現(xiàn)alert的方法，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<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",
})
// 內(nèi)部結(jié)構(gòu)套入
p.appendChild(textNode);
btn.appendChild(btnText);
MainDiv.appendChild(p);
MainDiv.appendChild(btn);
AllPage.appendChild(MainDiv);
// 整體顯示到頁面內(nèi)
document.getElementsByTagName("body")[0].appendChild(AllPage);
//禁止?jié)L動
$("body").on("touchmove", function (event) {
event.preventDefault;
}, false)
// 確定綁定點擊事件刪除標(biāo)簽
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實現(xiàn)alert的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JS腳本加載后執(zhí)行相應(yīng)回調(diào)函數(shù)的操作方法
本文主要講解怎么在成功加載 js 文件后再執(zhí)行相應(yīng)回調(diào)任務(wù),對JS腳本加載后執(zhí)行相應(yīng)回調(diào)函數(shù)的操作方法感興趣的朋友，通過本文學(xué)習(xí)下吧2018-02-02
js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實現(xiàn)方法示例
這篇文章主要介紹了js中火星坐標(biāo)、百度坐標(biāo)、WGS84坐標(biāo)轉(zhuǎn)換實現(xiàn)方法,涉及JavaScript數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2020-03-03
es6 super關(guān)鍵字的理解與應(yīng)用實例分析
這篇文章主要介紹了es6 super關(guān)鍵字的理解與應(yīng)用,結(jié)合實例形式分析了es6 super關(guān)鍵字的功能、原理、用法及相關(guān)操作注意事項,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了uni-app中實現(xiàn)元素拖動效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了JavaScript代碼編寫中各種各樣的坑和填坑方法,相信你肯定遇到過這些陷阱,而且陷入過,本文共計介紹了5種坑和填坑方法,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了如何通過JavaScript前端實現(xiàn)拼圖分割效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
驗證碼圖片顯示的時候，后面沒有加隨機參數(shù)導(dǎo)致在ie里面，怎么按回車都不變，顯示的是同樣的驗證碼,火狐沒有發(fā)現(xiàn)這個bug2013-03-03
一個新的API出來了。HTML5 （很快）將支持用戶設(shè)備振動。這明顯是很有趣的事情，比如它可以用戶觸發(fā)提醒，提升游戲體驗，下面小編給大家整理javascript手機震動api，需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了基于原生js淡入淡出函數(shù)封裝，可兼容IE，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要給大家介紹了關(guān)于利用js實現(xiàn)的一個提取中文拼音首字母的封裝工具類，文中給出了詳細(xì)完整的示例代碼，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友可以直接拿來用，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03