以前覺得自己手寫一個(gè)類似layui的彈出層是挺遙遠(yuǎn)的事，因?yàn)橥耆珱]有頭緒，即便在layui官網(wǎng)知道layui使用的都是C3動(dòng)畫
之前試過控制width:0;height:0來做動(dòng)畫，結(jié)果慘不忍睹，直到幾天前靈機(jī)一動(dòng)聯(lián)想到了transform的scale屬性，才稍微觸及到了皮毛

為了不添加格外的HTML結(jié)構(gòu)，所以彈出層也是動(dòng)態(tài)生成
layui彈出框和遮罩層是同級(jí)結(jié)構(gòu)，而我把彈出框放遮罩層里了，所以關(guān)閉時(shí)要用animationend來監(jiān)聽，彈出框做完動(dòng)畫后才刪除遮罩層
確認(rèn)框confirm之前也想跟原生confirm一樣，通過返回布爾值來進(jìn)行流程控制，結(jié)果為undefined，因?yàn)樵谡{(diào)用時(shí)就已經(jīng)返回了，而不是點(diǎn)了“確定“”才有返回值，這里和原生的不一樣，所以跟layui一樣使用callback

HTML

<input type="button" value="模擬layui彈出層" id="btn-alert">

JS

function MsgAlert() {this.alert = function (msg, time) {var delay = time || 1200,that = this;$('body').append('<div id="msgAlertMask">\n' +' <div id="msgAlert">\n' +' <div class="title">\n' +' <span class="close">×</span>\n' +' </div>\n' +' <div class="content">' + msg + '</div>\n' +' </div>\n' +'</div>');$('#msgAlert').addClass('alert-show');$('#msgAlert').on('click', '.close', function () {that.destroy();});setTimeout(function () {that.destroy();}, delay);};this.confirm = function (msg, callback) {var that = this;$('body').append('<div id="msgAlertMask">\n' +' <div id="msgAlert">\n' +' <div class="title">\n' +' <span class="close">×</span>\n' +' </div>\n' +' <div class="content">' + msg + '</div>\n' +' <div class="btn-box">\n' +' <input type="button" value="確定" class="ok">\n' +' <input type="button" value="取消" class="cancel">\n' +' </div>\n' +' </div>\n' +'</div>');$('#msgAlert').addClass('alert-show');$('#msgAlert').on('click', '.ok', function () {callback();});$('#msgAlert').on('click', '.close', function () {that.destroy();});$('#msgAlert').on('click','.cancel',function () {that.destroy();})};this.destroy = function () {$('#msgAlert').on('animationend', function () {$('#msgAlertMask').remove();});$('#msgAlert').addClass('alert-hide');}}window.pop = new MsgAlert();$('#btn-alert').click(function () {pop.alert('你說呢');})

CSS

<style>#msgAlertMask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);z-index: 999;}#msgAlert {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 300px;background: #fff;-webkit-background-clip: content;border-radius: 2px;box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);}#msgAlert .title {padding: 0 14px 0 20px;height: 42px;line-height: 42px;border-bottom: 1px solid #eee;font-size: 14px;color: #333;overflow: hidden;background-color: #F8F8F8;border-radius: 2px 2px 0 0;text-align: right;}#msgAlert .title .close {font-size: 24px;cursor: pointer;}#msgAlert .content {padding: 30px 24px 40px;}#msgAlert .btn-box {text-align: right;padding: 0 15px 12px;pointer-events: auto;user-select: none;-webkit-user-select: none;}#msgAlert .btn-box input {height: 28px;line-height: 28px;margin: 5px 5px 0;padding: 0 15px;border: 1px solid #dedede;background-color: #fff;color: #333;border-radius: 2px;font-weight: 400;cursor: pointer;text-decoration: none;}#msgAlert .btn-box .ok {border-color: #1E9FFF;background-color: #1E9FFF;color: #fff;}.alert-show {animation: alert-show 0.1s ease-out forwards;}.alert-hide {animation: alert-hide 0.1s ease-out forwards;}@keyframes alert-show {0% {opacity: 0;transform: translate(-50%, -50%) scale(0);}100% {opacity: 1;transform: translate(-50%, -50%) scale(1);}}@keyframes alert-hide {0% {opacity: 1;transform: translate(-50%, -50%) scale(1);}100% {opacity: 0;transform: translate(-50%, -50%) scale(0);}}</style>

總結(jié)：

動(dòng)畫效果還不夠好，而且有bug，確認(rèn)框回調(diào)里使用提示框的話會(huì)有問題，因?yàn)閮烧哂玫氖峭瑯拥膇d，這個(gè)可能需要?jiǎng)討B(tài)生成id來解決沖突問題

彈出框鼠標(biāo)拖拽、窗口resize()事件、初始化時(shí)的參數(shù)設(shè)置等等也沒有

通過transform:translate(-50%,-50%)方式居中好像會(huì)出現(xiàn)字和邊框模糊的問題，難道layui是為了避免此問題，才動(dòng)態(tài)給彈出框賦top、left？

還差得太遠(yuǎn)，繼續(xù)加油吧

轉(zhuǎn)載于:https://www.cnblogs.com/Grani/p/11029416.html

總結(jié)

以上是生活随笔為你收集整理的模拟layui弹出层的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。