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