JS封装弹框的两种方式

1：使用类

// 封装弹窗：类函数
class Modal {
    constructor(options) {
        // 默认：标题，内容，关闭按钮，取消按钮，确定按钮，取消文本，确定文本，取消方法，确定方法。合并数据对象
        this.options = Object.assign(
            {
                title: '提示',
                content: '',
                showClose: true,
                showCancel: true,
                showConfirm: true,
                cancenText: '取消',
                confirmText: '确定',
                onCancel: () => {
                    this.closeModal()
                },
                onConfirm: () => {
                    this.confirmModal()
                }
            },
            options
        )
    }
    init(){
        let modalBgDom = document.createElement('div')
        modalBgDom.className = 'modal_bg'
        let modalBoxDom = document.createElement('div')
        modalBoxDom.className ='modal_box'
        let modalHeadDom = document.createElement('div')
        modalHeadDom.className ='modal_head'
        modalHeadDom.innerText = this.options.title;
        this.createHead(modalHeadDom)
        let modalContentDom = document.createElement('div')
        modalContentDom.className ='modal_content'
        this.createContent(modalContentDom)
        let modalFootDom = document.createElement('div')
        modalFootDom.className ='modal_foot'
        this.cerateFoor(modalFootDom)
        modalBoxDom.appendChild(modalHeadDom)
        modalBoxDom.appendChild(modalContentDom)
        modalBoxDom.appendChild(modalFootDom)
        modalBgDom.appendChild(modalBoxDom)
        document.body.appendChild(modalBgDom)
    }
    createHead(modalHeadDom){
        if(this.options.showClose){
            let closeDom = document.createElement('div')
            closeDom.className ='modal_close'
            closeDom.onclick = this.options.onCancel
            closeDom.innerHTML = '<i class="iconfont icon-close"></i>'
            modalHeadDom.appendChild(closeDom)
        }
    }
    createContent(modalContentDom){
        modalContentDom.innerHTML = this.options.content;
    }
    cerateFoor(modalFootDom){
        if(this.options.showCancel){
            let cancelDom = document.createElement('div')
            cancelDom.className ='modal_btn modal_cancel'
            cancelDom.innerText = this.options.cancenText
            cancelDom.onclick = this.options.onCancel
            modalFootDom.appendChild(cancelDom)
        }
        if(this.options.showConfirm){
            let confirmDom = document.createElement('div')
            confirmDom.className ='modal_btn modal_confirm'
            confirmDom.innerText = this.options.confirmText
            confirmDom.onclick = this.options.onConfirm
            modalFootDom.appendChild(confirmDom)
        }
    }
    closeModal(){
        document.body.removeChild(document.getElementsByClassName('modal_bg')[0])
    }
    confirmModal(){
        document.body.removeChild(document.getElementsByClassName('modal_bg')[0])
    }
}

在页面中使用

1、引入js
2、页面使用
<div class="box" onclick="openModal()">打开弹窗</div>

function openModal(){
    modal = new Modal({title:'弹窗标题',onConfirm: () => {
        check();
    }})
    modal.init()
}
function check(){
    console.log('aaa')
    modal.closeModal()
}

2、js面向对象

// 封装弹窗：创建函数->面向对象
var showModal = function() {
    // 默认：标题，内容，关闭按钮，取消按钮，确定按钮，取消文本，确定文本，弹窗宽度，取消方法，确定方法。合并数据对象
    this.init = (params) => {
        let options = Object.assign(
            {
                title: '提示',
                content: '',
                showClose: true,
                showCancel: true,
                showConfirm: true,
                cancenText: '取消',
                confirmText: '确定',
                width: '10rem',
                onCancel: () => {
                    this.closeModal()
                },
                onConfirm: () => {
                    this.confirmModal()
                }
            },
            params
        )
        let modal = document.createElement('div')
        modal.className = 'modal_bg'
        let modalBox = 	document.createElement('div')
        modalBox.className ='modal_box'
        let modalHead = document.createElement('div')
        modalHead.className ='modal_head'
        modalHead.innerHTML = options.title
        if(options.showClose){
            let closeBtn = document.createElement('div')
            closeBtn.className ='modal_close'
            closeBtn.innerHTML = '<i class="iconfont icon-close"></i>'
            closeBtn.onclick = options.onCancel
            modalHead.appendChild(closeBtn)
        }
        let modalBody = document.createElement('div')
        modalBody.className ='modal_content'
        modalBody.innerHTML = options.content
        let modalFoot = document.createElement('div')
        modalFoot.className ='modal_foot'
        if(options.showCancel){
            let cancelBtn = document.createElement('div')
            cancelBtn.className ='modal_btn modal_cancel'
            cancelBtn.onclick = options.onCancel
            cancelBtn.innerText = options.cancenText
            modalFoot.appendChild(cancelBtn)
        }
        if(options.showConfirm){
            let confirmBtn = document.createElement('div')
            confirmBtn.className ='modal_btn modal_confirm'
            confirmBtn.innerText = options.confirmText
            confirmBtn.onclick = options.onConfirm
            modalFoot.appendChild(confirmBtn)
        }
        modalBox.appendChild(modalHead) 	
        modalBox.appendChild(modalBody) 
        modalBox.appendChild(modalFoot)
        modal.appendChild(modalBox)
        document.body.appendChild(modal)
    }
    this.closeModal = () => {
        document.body.removeChild(document.getElementsByClassName('modal_bg')[0])
    }
    this.confirmModal = () => {
        document.body.removeChild(document.getElementsByClassName('modal_bg')[0])
    }
}

在页面中使用

1、引入js
2、页面使用
<div class="box" onclick="openModal()">弹出</div>

var modal = new showModal()
function openModal(){
    modal.init({content:'你点击了轮播图',confirmText: '跳转到百度',onConfirm: () => {
        toUrl()
    }})
}
function toUrl(){
    window.location.href = 'http://www.baidu.com'
    modal.closeModal()
}