JavaScript實現(xiàn)alert彈框效果
本文實例為大家分享了JavaScript實現(xiàn)alert彈框的具體代碼,供大家參考,具體內(nèi)容如下
因本人水平有限,不足之處還望大家指正。
先上圖:
為什么會出現(xiàn)這個需求?瀏覽器自帶的alert不好用嗎?
自帶的alert在不同的瀏覽器是有差異的,而且樣式也不美觀,用戶體驗度不是很好。所以我們要自己寫一個alert彈框,這樣我們就可以按照我們自己的需求,把alert彈框做的美觀一點。
以下是alert.js代碼:
var myAlert = { alertbox : function(alertContent){ var windowWidth = window.innerWidth; windowHeight = window.innerHeight; alertContainer = document.createElement("div"); alertContainer.id = "myAlertBox"; alertContainer.style.cssText="position:absolute;left:0px;top:0px;width:100%;z-index:9999;"; alertContainer.style.height = windowHeight+"px"; alertOpacity = document.createElement("div"); alertOpacity.style.cssText="position:absolute;left:0px;top:0px;width:100%;background:#000;opacity:0.5;z-index:9999;"; alertOpacity.style.height = windowHeight+"px"; alertContainer.appendChild(alertOpacity) alertMainBox = document.createElement("div"); alertMainBox.style.cssText="position:absolute;width:200px;height:200px;line-height:200px;text-align:center;background:green;z-index:10000;" alertMainBoxLeft = (windowWidth-200)/2; alertMainBoxTop = (windowHeight-200)/2; alertMainBox.style.left = alertMainBoxLeft+"px"; alertMainBox.style.top = alertMainBoxTop+"px"; alertMainBox.innerHTML = alertContent; alertContainer.appendChild(alertMainBox); alertClose = document.createElement("div"); alertClose.id = "closeBox"; alertClose.style.cssText = "position:absolute;right:0px;top:0px;width:30px;height:30px;background:red;cursor:pointer"; alertMainBox.appendChild(alertClose); document.body.appendChild(alertContainer); closeButton = document.getElementById("closeBox"); console.log(closeButton) closeButton.onclick = function(){ document.body.removeChild(document.getElementById("myAlertBox")); } } }
以下是具體要用時的代碼:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Study</title> </head> <script type="text/javascript" charset="utf-8" src="alert.js"></script> <body> <script type="text/javascript" charset="utf-8"> myAlert.alertbox("這是自定義alert框"); </script> </body> </html>
用法很簡單,引入alert.js文件,要用時直接myAlert.alertbox("內(nèi)容");和使用alert一樣。
在這塊給大家提供個思路,供大家參考。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JavaScript 拖拽實現(xiàn)(附注釋),最經(jīng)典簡單短小精悍!
JavaScript拖拽實現(xiàn)(附注釋),最經(jīng)典!最簡單!短小精悍!2009-04-04動態(tài)加載iframe時get請求傳遞中文參數(shù)亂碼解決方法
這篇文章主要介紹了動態(tài)加載iframe時get請求傳遞中文參數(shù)亂碼解決方法,需要的朋友可以參考下2014-05-05JavaScript極簡入門教程(二):對象和函數(shù)
這篇文章主要介紹了JavaScript極簡入門教程(二):對象和函數(shù),本文講解了對象基礎知識、函數(shù)基礎知識、函數(shù)調(diào)用、異常、繼承等內(nèi)容,需要的朋友可以參考下2014-10-10textarea不能通過maxlength屬性來限制字數(shù)的解決方法
textarea稱文本域,又稱文本區(qū),其不能通過maxlength屬性來限制字數(shù),為此必須尋求其他方法來加以限制以達到預設的需求2014-09-09