自定義alert框


<script>

         function alerts(data, callback) { //回調函數
             var alert_bg = document.createElement('div');
             alert_box = document.createElement('div'),
                 alert_text = document.createElement('div'),
                 alert_btn = document.createElement('div'),
                 textNode = document.createTextNode(data ? data : ''),
                 btnText = document.createTextNode('確 定');

             // 控制樣式
             css(alert_bg, {
                 'position': 'fixed',
                 'top': '0',
                 'left': '0',
                 'right': '0',
                 'bottom': '0',
                 'background-color': 'rgba(0, 0, 0, 0.1)',
                 'z-index': '999999999'
             });

             css(alert_box, {
                 'width': '540px',
                 'max-width': '90%',
                 'font-size': '23px',
                 'text-align': 'center',
                 'background-color': '#fff',
                 'border-radius': '15px',
                 'position': 'absolute',
                 'top': '50%',
                 'left': '50%',
                 'transform': 'translate(-50%, -50%)'
             });

             css(alert_text, {
                 'padding': '10px 15px',
                 'border-bottom': '1px solid #ddd'
             });

             css(alert_btn, {
                 'padding': '10px 0',
                 'color': '#007aff',
                 'font-weight': '600',
                 'cursor': 'pointer'
             });

             // 內部結構套入
             alert_text.appendChild(textNode);
             alert_btn.appendChild(btnText);
             alert_box.appendChild(alert_text);
             alert_box.appendChild(alert_btn);
             alert_bg.appendChild(alert_box);

             // 整體顯示到頁面內
             document.getElementsByTagName('body')[0].appendChild(alert_bg);

             // 確定綁定點擊事件刪除標簽
             alert_btn.onclick = function() {
                 window.location.reload();
                 alert_bg.parentNode.removeChild(alert_bg);
                 if (typeof callback === 'function') {
                     callback(); //回調
                 }
             }
         }

         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;
         }


     </script>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM