封装模态框

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>面向对象封装消息提示</title>
<style>
    .modal {
        width: 300px;
        min-height: 100px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        position: fixed;
        z-index: 999;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        background-color: #fff;
    }

    .modal .header {
        line-height: 40px;
        padding: 0 10px;
        position: relative;
        font-size: 20px;
    }

    .modal .header i {
        font-style: normal;
        color: #999;
        position: absolute;
        right: 15px;
        top: -2px;
        cursor: pointer;
    }

    .modal .body {
        text-align: center;
        padding: 10px;
    }

    .modal .footer {
        display: flex;
        justify-content: flex-end;
        padding: 10px;
    }

    .modal .footer a {
        padding: 3px 8px;
        background: #ccc;
        text-decoration: none;
        color: #fff;
        border-radius: 2px;
        margin-right: 10px;
        font-size: 14px;
    }

    .modal .footer a.submit {
        background-color: #369;
    }
</style>
</head>

<body>
<button id="btn1">消息提示1</button>
<button id="btn2">消息提示2</button>
<button id="btn3">消息提示3</button>


<!-- <div class="modal">
  <div class="header">提示消息 <i>x</i></div>
  <div class="footer">
    <img src="./111.jpg" alt="" width="80%">
  </div>
</div> -->


<script>
    //1.模态框构造函数
    function Modal(title, url) {
        this.title = title
        this.url = url
        this.modalBox = `
        <div class="modal">
        <div class="header">${title} <i>x</i></div>
        <div class="footer">
            <img src="${url}" alt="" width="100%">
        </div>
        </div>
        `
    }

    //2.原型对象 
    Modal.prototype.open = function () {
        //(1)创建div标签
        let div = document.createElement('div')
        //(2)设置标签内容
        div.innerHTML = this.modalBox
        //(3)添加到页面
        document.body.appendChild(div)
        //给关闭按钮注册一个点击事件
        div.querySelector('.modal i').addEventListener('click', function () {
            div.remove()
        })
    }

    document.querySelector('#btn1').addEventListener('click', function () {
        //3.实例对象
        let m1 = new Modal('提示信息', './111.jpg')
        m1.open()
        console.log(m1)
    })

    document.querySelector('#btn2').addEventListener('click', function () {
        let m2 = new Modal('友情提示', './222.jpg')
        console.log(m2)
        m2.open()
    })

    document.querySelector('#btn3').addEventListener('click', function () {
        let m3 = new Modal('友情提示', './333.jpg')
        console.log(m3)
        m3.open()
    })


</script>
</body>

</html>
原型链应用

封装模态框
