自定義alert樣式
阿新 • • 發佈:2018-12-13
js程式碼:
function alert(msg, url) {
if($('.popAlert').length > 0) {
// return false;
}
var maskElm = $('<section />').addClass('popMask').appendTo('body');
var alertElm = $('<section />').addClass('popAlert').appendTo('body');
var messageElm = $('<div />' ).addClass('popCnt').html(msg || '').appendTo(alertElm);
var yesElm = $('<span/>').addClass('popBtn').text('確定').appendTo(alertElm);
maskElm.show();
alertElm.show();
maskElm.add(yesElm).bind('click', function() {
maskElm.hide(0, function() {
$(this).remove();
})
alertElm.hide(0 , function() {
$(this).remove();
})
})
if(url && url != "") {
yesElm.bind('click', function() {
location.href = url;
})
}
}
css樣式
/*----------------------alert彈出層----------------------*/
.popAlert { display:none; position:fixed; z-index :100; left:50%; top:50%; margin:-390px 0 0 -260px; width:520px; padding-bottom:50px; background-color:#181713; -webkit-box-sizing:border-box; box-sizing:border-box; background-color:#FFFFFF ;}
.popCnt { padding:70px 40px 30px 40px; line-height:40px; font-size:28px; text-align:center; color:#333; }
.popBtn,
.popBtn:hover,
.popBtn:visited,
.popBtn:active { display:block; width:240px; height:60px; margin:0 auto; line-height:60px; background:none; text-align:center; color:#fff;font-size:25px;border-radius: 5px;background-color:#231c84 ; }
.popMask { display:none; position:fixed; z-index:99; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.9); }
樣式變更只需要修改css即可。。。