使用原生JS(es5)封装一个属于自己的Modal弹框
效果图展示
主要代码
function Modal(options) {
options = Object.assign({
title: '标题',
backgroundColor: '#fff', // 背景颜色
mask: true, //是否显示遮罩层,
content: '弹框内容',
cancelText: '取消',//取消按钮文字
okText: '确认', // 确认按钮文字,
width: 400, //对话框的宽度
onCancel: this.closeModal, //取消按钮回调,默认是关闭弹框
onOk: () => {
console.log('你点击了确认')
}, // 确认按钮回调
}, options)
this.options = options
// 创建遮罩层
function createMask() {
let mask = document.createElement('div')
mask.className = 'mask'
document.body.appendChild(mask)
}
// 创建modal弹框
function createModal() {
let modal = document.createElement('div'),
titleDom = document.createElement('div'),
main = document.createElement('div'),
footer = document.createElement('div'),
btn_l = document.createElement('button'),
btn_r = document.createElement('button');
let { title, content, cancelText, okText, width, onCancel, onOk, backgroundColor
} = this.options
modal.className = 'modal'
modal.style.width = width + 'px'
modal.style.backgroundColor = backgroundColor
titleDom.className = 'title'
let closeIcon = document.createElement('span')
closeIcon.addEventListener('click', closeModal.bind(this))
closeIcon.className = 'close'
closeIcon.innerHTML = 'x'
titleDom.innerHTML = `<span>${title}</span>`
titleDom.appendChild(closeIcon)
main.className = 'main'
main.innerHTML = content
footer.className = 'footer'
btn_l.innerHTML = '取消'
btn_r.innerHTML = '确认'
footer.appendChild(btn_l)
footer.appendChild(btn_r)
onCancel = onCancel ? onCancel : this.closeModal
btn_l.addEventListener('click', onCancel.bind(this))
btn_r.addEventListener('click', onOk)
modal.appendChild(titleDom)
modal.appendChild(main)
modal.appendChild(footer)
document.body.appendChild(modal)
}
// 关闭弹框
function closeModal(ev) {
let target = ev.path[2]
let { mask } = this.options
mask ? document.body.removeChild(document.querySelector('.mask')) : null
document.body.removeChild(target)
}
// 初始化
function init() {
let { mask } = this.options
mask ? createMask() : null
this.createModal()
}
Modal.prototype.init = init
Modal.prototype.createModal = createModal
Modal.prototype.closeModal = closeModal
// 执行初始化方法
this.init()
}
使用的案例
let b = new Modal({
title: '我是第二个',
content: `<h1>模态框呀模态框</h1><h1>模态框呀模态框</h1><h1>模态框呀模态框</h1><h1>模态框呀模态框</h1>`
})
模态框样式代码
* {
padding: 0;
margin: 0;
}
.mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.2);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: aliceblue;
border-radius: 5px;
z-index: 99;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.modal .title {
height: 30px;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding: 0 16px;
}
.title .close {
width: 20px;
height: 20px;
border-radius: 5px;
line-height: 20px;
text-align: center;
font-size: 14px;
cursor: pointer;
}
.title .close:hover {
background: rgba(0, 0, 0, 0.2);
}
.modal .main {
box-sizing: border-box;
padding: 16px;
height: calc(100% - 80px);
}
.modal .footer {
height: 50px;
text-align: right;
box-sizing: border-box;
padding-right: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: flex-end;
}
.footer button {
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
border: none;
border-radius: 5px;
margin-left: 8px;
}
.footer button:hover {
background-color: #49a4ff;
}
PS:这个样式是我随便写的,后期可根据自己的需求进行更改。第一次封装modal弹框,有不足的地方欢迎帮忙指出来。谢谢