JavaScript模拟confirm弹出框

来源：互联网发布：app下载软件编辑：程序博客网时间：2024/06/11 19:44

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();// 点击确定后。。});

0 0