JavaScript模擬confirm彈出框

confirm.js

(function(exports, document, undefined){
	var confirm = document.getElementById('confirm'),
		confirm_message = confirm.querySelector('#confirm_message'),
		btn_close = confirm.querySelector('#btn_close'),
		btn_confirm = confirm.querySelector('#btn_confirm'),
		mask = document.getElementById('mask'),
		confirm_handler = null;
	exports.show_confirm = function(message, confirm_handler){
		confirm_message.innerHTML = message || '';
		confirm_handler = confirm_handler || hide_confirm;
		exports.hide_confirm = function(){
			confirm.style.display = 'none';
			mask.style.display = 'none';
			mask.removeEventListener('touchstart', hide_confirm, false);
			btn_close.removeEventListener('touchstart', hide_confirm, false);
			btn_confirm.removeEventListener('touchstart', confirm_handler, false);
		};
		confirm.style.display = 'block';
		mask.style.display = 'block';
		mask.addEventListener('touchstart', hide_confirm, false);
		btn_close.addEventListener('touchstart', hide_confirm, false);
		btn_confirm.addEventListener('touchstart', confirm_handler, false);
	};
})(window, document);

html

<div class="mask" id="mask"></div>
<div class="confirm" id="confirm">
	<header>
		<img src="res/btn_close.png" class="btn_close" id="btn_close">
	</header>
	<section>
		<p id="confirm_message">
			提示<br>
			取消預約後，預約單將無法恢復，您確定要取消預約嗎？
		</p>
	</section>
	<footer>
		<button class="btn_confirm" id="btn_confirm">確定</button>
	</footer>
</div>
<script src="js/confirm.js"></script>

css

.confirm{
    width: 90%;
    position: fixed;
    top: 30%;
    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; 
}
.confirm header{
    text-align: right;
}
.confirm header .btn_close{
    width: 30px;
    margin-top: -15px;
    margin-left: -15px;
    position: absolute;
}
.confirm section{
    padding: 10px;
}
.confirm footer{
    text-align: center;
}
.confirm footer .btn_confirm{
    width: 100%;
    height: 44px;
    margin: 10px auto 0;
    background-color: #ff7670;
    color: #fff;
    border-radius: 4px;
    border: none;
    font-size: 11pt;
}
.mask{
    width: 100%;
    height: 100%; 
    background-color: rgba(0, 0, 0, .7);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

confirm.js調用

var msg = '提示<br>取消預約後，預約單將無法恢復，您確定要取消預約嗎？';
show_confirm(msg, function(){
	hide_confirm();
	// 點擊確定後。。

});