js 面向对象模态框

最新推荐文章于 2024-06-14 20:38:29 发布

来自前端的小白

最新推荐文章于 2024-06-14 20:38:29 发布

阅读量222

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_56493571/article/details/136092867

版权

本文介绍了如何使用JavaScript创建一个具有自定义标题和消息的模态框，包括构造函数、open和close方法的实现，以及与CSS样式配合的使用示例。

摘要由CSDN通过智能技术生成

1、需要创建一个div

2、需要给div添加内容

3、需要div添加类名

4、需要写一个公共open方法

5、需要写一个close方法

代码如下：

 <style>
    .modal {
      width: 400px;
      height: 120px;
      margin: auto;
      background: #ccc;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .title p {
      padding-left: 10px;
    }

    .title span {
      padding-right: 10px;
    }

    .message {
      text-align: center;
    }
  </style>

<button id="login">登陆</button>
  <button id="del">删除</button>

 <script>
//构造函数模态框
    function Modal(title = '', message = '') {
//1、创建div
      this.modalBox = document.createElement('div');
//2、给div里添加内容
      this.modalBox.innerHTML = `<div class="modal">
    <div class="title"><p>${title}</p><span>X</span></div>
    <div class="message">${message}</div>
   </div> `;
//给div添加class类名
      this.modalBox.className = 'modal'
    }
//一个添加模态框的公共方法
    Modal.prototype.open = function () {
//先获取一个模态框，有则删除，没有不做任何操作
      const box = document.querySelector('.modal');
      box && box.remove()
 //把模态框添加到body里去
      document.body.append(this.modalBox);
//X号调用关闭方法
      document.querySelector('.title span').addEventListener('click', (() => {
        this.del()
      }))
    }
//关闭方法
    Modal.prototype.del = function () {
      this.modalBox.remove()
    }
//模态框的调用
    document.querySelector('#login').addEventListener('click', () => {
      const login = new Modal('抱歉', '你还没有权限');
      login.open()
    })
    document.querySelector('#del').addEventListener('click', () => {
      const login = new Modal('不好意思', '你还不能删除');
      login.open()
    })
  </script>