JavaScript封装原生公用弹窗
js:
var Popup = {
/*
* alert 弹窗 text 必传
*/
alert: function(text) {
var model = document.getElementById('popupMark');
if (model) {
var content = document.getElementById('alertText');
content.innerText = text;
model.style.display = 'block';
return
}
var creatediv = document.createElement('div'); // 创建div
creatediv.className = 'popup_mark'; // 添加class
creatediv.setAttribute('id', 'popupMark'); // 添加ID
var contentHtml = '<div class="popup_box">' +
'<h1><img src="http://www.jq22.com/tp/6370052847182084148113881.png"/></h1>' +
'<p id="alertText">' + text + '</p>' +
'<h3 id="knowBtn">我知道了</h3>' +
'<div class="closePopup" id="closePopup"></div>' +
'</div>'
creatediv.innerHTML = contentHtml;
document.body.appendChild(creatediv);
document.getElementById('closePopup').addEventListener('click', function() {
Popup.sureAlert();
})
document.getElementById('knowBtn').addEventListener('click', function() {
Popup.sureAlert();
})
},
/*
* 确定弹窗
*/
sureAlert: function() {
var model = document.getElementById('popupMark');
model.style.display = 'none'
},
confirm: function(text, fn) {
var model = document.getElementById('popupConfirm');
if (model) {
var content = document.getElementById('confirmText');
content.innerText = text;
model.style.display = 'block';
return
}
var creatediv = document.createElement('div'); // 创建div
creatediv.className = 'popup_mark'; // 添加class
creatediv.setAttribute('id', 'popupConfirm'); // 添加ID
var contentHtml = '<div class="popup_box">' +
'<h1><img src="http://www.jq22.com/tp/6370052847182084148113881.png"/></h1>' +
'<p id="confirmText">' + text + '</p>' +
'<div class="confirmBtn"><a id="yesConfirm" href="javascript:void(0)">确定</a><a id="cancelConfirm" href="javascript:void(0)">取消</a></div>' +
'<div class="closePopup" id="closeConfirm"></div>' +
'</div>'
creatediv.innerHTML = contentHtml;
document.body.appendChild(creatediv);
document.getElementById('closeConfirm').addEventListener('click', function() {
Popup.closeConfirm();
})
document.getElementById('cancelConfirm').addEventListener('click', function() {
Popup.closeConfirm();
})
document.getElementById('yesConfirm').addEventListener('click', function() {
Popup.sureConfirm(fn);
})
},
closeConfirm: function() {
var model = document.getElementById('popupConfirm');
model.style.display = 'none'
},
sureConfirm: function(fn) {
var model = document.getElementById('popupConfirm');
model.style.display = 'none';
if (typeof fn == 'function') {
fn();
}
}
}
css:
* {
margin:0;
padding:0;
}
a {
text-decoration:none
}
/* 弹窗 start */
.popup_mark {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
z-index:999;
}
.popup_box {
width:405px;
min-height:260px;
position:absolute;
left:50%;
top:50%;
margin-left:-202px;
margin-top:-130px;
border-radius:8px;
background:#fff;
}
.popup_box p {
text-align:center;
font-size:16px;
color:#333;
padding:0 10px;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}
.popup_box h1 {
width:28px;
height:28px;
margin:60px auto 22px;
}
.popup_box h3 {
width:96px;
line-height:39px;
background:rgba(255,152,0,1);
border-radius:2px;
font-size:14px;
color:#fff;
text-align:center;
margin:50px auto 0;
cursor:pointer;
}
.closePopup {
position:absolute;
right:11px;
top:11px;
width:13px;
height:13px;
background:#fff;
border-radius:50%;
cursor:pointer;
}
.closePopup:before {
content:'\0a';
display:block;
width:13px;
height:2px;
background:#bbb;
transform:rotate(45deg);
position:absolute;
right:0;
top:6px;
}
.closePopup:after {
content:'\0a';
display:block;
width:13px;
height:2px;
background:#bbb;
transform:rotate(-45deg);
position:absolute;
right:0;
top:6px;
}
.confirmBtn {
width:100%;
margin:50px auto 0;
text-align:center;
}
.confirmBtn a {
display:inline-block;
width:94px;
line-height:37px;
background:rgba(255,152,0,1);
border-radius:2px;
font-size:14px;
color:#fff;
text-align:center;
border:1px solid rgba(255,152,0,1);
}
.confirmBtn a:last-child {
margin-left:20px;
background:#fff;
color:rgba(255,152,0,1);
}
HTML调用:
<div>
<button id="alert">alert弹窗</button>
<button id="confirm">confirm弹窗</button>
</div>
<script type="text/javascript">
function fn() {
console.log('催定?除?')
}
document.getElementById("alert").addEventListener("click", function() {
Popup.alert("提示下")
})
document.getElementById("confirm").addEventListener("click", function() {
Popup.confirm("催定?除?", fn)
})
</script>
效果: