原生 js 模擬 alert 彈窗

時間 2019-11-17

原文原文鏈接

複製頭部的 js 代碼到你的 js 文件的任何地方，調用Chef.alert方法傳入相應的參數便可並無什麼功能，只是一個提示的做用，可能樣式比 alert 的彈窗好看點，css是寫在js裏的，只要你會寫 css 就能夠自行修改樣式.css

Chef.alert 使用說明：html

此方法有6個參數：
1,title 彈出框的標題
2,content 彈出框的提示文字也能夠以字符串的形式傳入任何html標籤，
3,firm 彈出框按鈕的文字
4,offset 彈出框距離頂部的位置，左右默認水平居中，
5,width 彈出框的寬度
6,shade 遮罩層的透明度app

以爲沒有用的參數能夠不傳
******
注意：Chef.alert 只是一個提示的做用沒有任何操做this

如下是代碼：spa

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        var Chef = { //body 的寬高
            'bodyH':document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight, 'bodyW':document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth, //動態建立 style 標籤添加樣式
            'cssStyle':function (){ var doc=document; var style=doc.createElement("style"); if(style.styleSheet){// IE
 style.styleSheet.cssText = arguments[0]; }else{// w3c 
                                var cssText = doc.createTextNode(arguments[0]); style.appendChild(cssText); } var heads = doc.getElementsByTagName("head"); if(heads.length){ heads[0].appendChild(style); }else{ doc.documentElement.appendChild(style); } }, // 建立並顯示遮罩層
            'createChef':function(){ if(document.body.getElementsByClassName('Chef_opacity').length == 1){ document.body.removeChild(document.body.getElementsByClassName('Chef_opacity')[0]); } var div = this.create('div'); div.style.width = this.bodyW + 'px'; div.style.height = this.bodyH + 'px'; div.className = 'Chef_opacity'; document.body.appendChild(div); }, //alert 框
            'alert':function(){ // 顯示遮罩層
                        this.createChef(); // 建立
                        var alertDiv = this.create('div'), alertH2 = this.create('h2'), alertX = this.create('span'), alertP = this.create('p'), alertBDiv = this.create('div'), alertFirm = this.create('button'); alertX.innerHTML = 'X'; alertX.className = 'Chef_X'; // 插號的click事件 什麼都不作
 alertX.onclick = function(){alertFirm.onclick();} // 肯定按鈕的click事件 什麼都不作
 alertFirm.onclick = function(){ document.getElementsByClassName('Chef_opacity')[0].style.display = 'none'; document.body.removeChild(alertDiv); } //樣式以及內容
 alertDiv.className = 'Chef_alert'; if(arguments.length == 1){ document.getElementsByClassName('Chef_opacity')[0].style.background = 'rgba(0,0,0,'+arguments[0].shade+')' ; alertDiv.style.top = arguments[0].offset; if(arguments[0].width == undefined){ alertDiv.style.width = '260px'; }else{ alertDiv.style.width = arguments[0].width; alertDiv.style.marginLeft = '-'+parseInt(arguments[0].width)/2 + 'px';
 } arguments[0].title == undefined ? alertH2.innerHTML = '來自網頁的信息' : alertH2.innerHTML = arguments[0].title; arguments[0].content == undefined ? alertP.innerHTML = '' : alertP.innerHTML = arguments[0].content; arguments[0].firm == undefined ? alertFirm.innerHTML = '肯定' : alertFirm.innerHTML = arguments[0].firm; }else{// -- 默認提示信息
 alertH2.innerHTML = '來自網頁的信息'; alertFirm.innerHTML = '肯定'; } // 添加到頁面
 alertBDiv.appendChild(alertFirm); alertH2.appendChild(alertX); alertDiv.appendChild(alertH2); alertDiv.appendChild(alertP); alertDiv.appendChild(alertBDiv); document.body.appendChild(alertDiv); }, //建立
            'create':function(){ return document.createElement(arguments[0]); } }; ;(function(Chef){ var cssString = '\ *{padding:0;margin:0;}\ .Chef_opacity{display:block;background:rgba(0,0,0,0.4);position:fixed;top:0;z-index:99;}\ .Chef_alert{position:fixed;top:100px;background:white;border-top:3px solid #FF6636;width:260px;padding-bottom:5px;left:50%;margin-left:-130px;z-index:100;font-family:Microsoft YaHei;}\ .Chef_alert>h2{width:90%;margin:10px auto;margin-bottom:0;font-size:18px;}\ .Chef_alert>p{width:90%;margin:0 auto;padding:25px 0;border-bottom:1px solid #d8d8d8;}\ .Chef_alert>div{width:90%;height:60px;margin:0 auto;font-size:0;text-align: center;}\ .Chef_alert>div>button{width:50%;height:100%;border:0;outline:0;font-size:18px;color:#FE651F;background:white;font-family:Microsoft YaHei;cursor:pointer;}\ .Chef_X{float:right;font-size:13px;color:grey;cursor:pointer;font-weight:normal;}\ '; Chef.cssStyle(cssString); })(Chef); </script>
</head>
<body>
    <button id='alertBtn'>alert彈窗</button>
    <script>
    //獲取對象添加事件
 document.getElementById('alertBtn').onclick = function(){ //調用 Chef.alert() 方法
 Chef.alert({ 'title':'標題標題標題', 'content':'內容', 'firm':'肯定', 'offset':'100px', 'width':'260px', 'shade':0.4 }); }; </script>
</body>
</html>

有問題能夠留言諮詢，看到必定回覆。code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。