js原生模态窗

原文章：https://www.jianshu.com/p/2566af21635f 下面是 css 代码

.modal-dialog-content {
    widht: 300px;
    padding: 20px;
}

/* 🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼 */
.modal-layer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    transform: scale(1.1);
    transition: opacity 0.25s 0s, transform 0.25s;
}
.modal-layer.show {
    visibility: visible;
    transform: scale(1.0);
    transition: opacity 0.25s 0s, transform 0.25s;
}
.modal-dialog-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 0.5rem;
}

下面是 js 代码

const dialogUtil = importFromBelow();
const DIALOG_ID = 'my-modal-dialog';
const contentHtml = `
  <div class="modal-dialog-content" id="modal-dialog-content">
    <div>这里是弹窗内容</div>
    <div>
      <button id="dialog-close-button">close modal dialog</button>
    </div>
  </div
`;
dialogUtil.init({
  id: DIALOG_ID,
  contentHtml,
  // closeWhenClickLayer: false
});
const closeButtonEle = document.querySelector('#dialog-close-button');
closeButtonEle.onclick = function (e) {
  dialogUtil.close(DIALOG_ID);
};
const triggerButton = document.querySelector('#trigger-button');
triggerButton.onclick = function (e) {
  dialogUtil.popup(DIALOG_ID);
};


/* 🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼🌼 */
function importFromBelow() {
    /**
     * 
     * @param {object} options init options
     * @param {string} options.id dialog id
     * @param {string} options.contentHtml dialog content html
     * @param {boolean} options.closeWhenClickLayer whether close dialog when click layer
     */
    function init(options) {
        const {id: dialogId, contentHtml, closeWhenClickLayer = true} = options;
        const layerEle = document.createElement('div');
        layerEle.setAttribute('class', 'modal-layer');
        layerEle.setAttribute('id', dialogId);
        const contentContainerEle = document.createElement('div');
        contentContainerEle.setAttribute('class', 'modal-dialog-container');
        contentContainerEle.innerHTML = contentHtml;
        layerEle.appendChild(contentContainerEle);
        document.body.appendChild(layerEle);
        if (closeWhenClickLayer) {
            document.onclick = function (e) {
                if (e.target === layerEle) {
                    close(dialogId);
                }
            }
        }
    }

    /**
     * destroy modal dialog
     * @param {string} dialogId dialog id
     */
    function destroy(dialogId) {
        const dialogEle = document.querySelector(`#${dialogId}`);
        dialogEle.parentNode.removeChild(dialogEle);
    }

    function popup(dialogId) {
        const dialogEle = document.querySelector(`#${dialogId}`);
        dialogEle.classList.add('show');
    }

    function close(dialogId) {
        const dialogEle = document.querySelector(`#${dialogId}`);
        dialogEle.classList.remove('show');
    }

    return {init, destroy, popup, close};
}