JavaScript模拟alert弹出框

alert在不同浏览器的样式不一，要统一样式，只能模拟实现。

html

<div class="mask" id="mask"></div><div class="alert" id="alert"></div>

css

.alert{width: 60%;position: fixed;top: 40%;left: 0;right: 0;margin: auto;padding: 10px;box-sizing: border-box;background: #fcfcfc;border-radius: 4px;box-shadow: 0 0 4px;text-align: center;display: none;}.mask{width: 100%;height: 100%;background-color: rgba(0, 0, 0, .7);position: fixed;top: 0;left: 0;display: none;}

javascript

(function(exports, document, undefined){var alert = document.getElementById('alert'),mask = document.getElementById('mask');exports.show_alert = function(message){alert.innerHTML = message || '';alert.style.display = 'block';mask.style.display = 'block';mask.addEventListener('touchstart', hide_alert, false);};exports.hide_alert = function(){alert.style.display = 'none';mask.style.display = 'none';mask.removeEventListener('touchstart', hide_alert, false);};})(window, document);