以前覺得自己手寫一個類似layui的彈出層是挺遙遠的事，因為完全沒有頭緒，即便在layui官網知道layui使用的都是C3動畫
之前試過控制width:0;height:0來做動畫，結果慘不忍睹，直到幾天前靈機一動聯想到了transform的scale屬性，才稍微觸及到了皮毛

為了不添加格外的HTML結構，所以彈出層也是動態生成
layui彈出框和遮罩層是同級結構，而我把彈出框放遮罩層里了，所以關閉時要用animationend來監聽，彈出框做完動畫后才刪除遮罩層
確認框confirm之前也想跟原生confirm一樣，通過返回布爾值來進行流程控制，結果為undefined，因為在調用時就已經返回了，而不是點了“確定“”才有返回值，這里和原生的不一樣，所以跟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>

總結：

動畫效果還不夠好，而且有bug，確認框回調里使用提示框的話會有問題，因為兩者用的是同樣的id，這個可能需要動態生成id來解決沖突問題

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

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

還差得太遠，繼續加油吧

轉載于:https://www.cnblogs.com/Grani/p/11029416.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。