實現js的相似alert效果的函數

時間 2019-12-10

原文原文鏈接

　　這個簡單的相似alert的函數，效果還行，至於css樣式，那沒的說了，筆者確實盡力了，若是讀者以爲太爛，你能夠隨便改函數的樣式的，反正，筆者以爲還能夠，呵呵。javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>實現相似alert效果的函數</title>
    <meta name="keywords" content="關鍵字列表" />
    <meta name="description" content="網頁描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css"></style>
    
</head>
<body>

</body>
</html>
<script type="text/javascript">
(function(){
//實現相似alert炫酷效果的函數
function aler(str){
    //彈出的div由遮罩層裏面的彈出框以及按鈕組成。
    //給div的style添加z-index:9999，數值越大，div越在最上面
    //rgba(0~255,0~255,0~255,opacity)opacity透明透明度爲0~1，只設置背景顏色爲透明
    //生成彈出的div，也是遮罩層
    var ale = document.createElement('div');
        ale.setAttribute("style","background: rgba(0, 0, 0,0.5); position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; user-select: none; z-index:1032;");
    //給遮罩層添加id屬性，爲的是下面點擊按鈕時刪除掉它
        ale.setAttribute("id","mask");
    //彈出的div添加到body中
        document.body.appendChild(ale);
    //生成彈出框
    var po = document.createElement('div');
    //彈出框添加到彈出的div遮罩層中
        ale.appendChild(po);
    //獲取彈出div對象
    var mask = document.getElementById('mask');
    //按鈕，綁定div彈出層的點擊刪除事件
    var btn = '<button onclick="document.body.removeChild(mask);">肯定</button>';
    //彈出框的高度和寬度、背景顏色
    var H = 200,W = 240,backgroundcolor = '#F8931D';
    //獲取實際頁面的left值。（頁面寬度減去元素自身寬度/2）
    var Left = (document.documentElement.clientWidth-W)/2;
    //獲取實際頁面的top值。（頁面寬度減去元素自身高度/2）
    var top  = (document.documentElement.clientHeight-H)/2;
    //給彈出框設置屬性
        po.setAttribute('style','width:'+W+'px;height:'+H+'px; background-color:'+backgroundcolor+';border:1px solid #000;position:absolute;'+'top:'+top+'px;'+'left:'+Left+'px;');
        po.innerHTML= '<div style="line-height:'+H*6/7+'px;text-align:center;width:'+W+'px;height:'+H*6/7+'px;">'+str+'</div>' + '<div style="line-height:'+H*1/7+'px;text-align:center;width:'+W+'px;height:'+H*1/7+'px;">'+btn+'</div>';
}
//返回Aler函數，取名爲Alert
return window.Alert=aler;
})();
Alert('hello world');
alert('肯定');
</script>