js实现modal

实现基础模态框（Modal）

HTML结构

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这里是模态框内容</p>
  </div>
</div>

CSS样式

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

JavaScript逻辑

const modal = document.getElementById("myModal");
const span = document.getElementsByClassName("close")[0];

// 打开模态框
function openModal() {
  modal.style.display = "block";
}

// 关闭模态框
span.onclick = function() {
  modal.style.display = "none";
}

// 点击模态框外部关闭
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

动态创建模态框

JavaScript实现

function createModal(content) {
  const modal = document.createElement('div');
  modal.className = 'modal';

  const modalContent = document.createElement('div');
  modalContent.className = 'modal-content';

  const closeBtn = document.createElement('span');
  closeBtn.className = 'close';
  closeBtn.innerHTML = '×';

  modalContent.appendChild(closeBtn);
  modalContent.appendChild(document.createTextNode(content));
  modal.appendChild(modalContent);
  document.body.appendChild(modal);

  closeBtn.onclick = function() {
    document.body.removeChild(modal);
  }

  window.onclick = function(event) {
    if (event.target === modal) {
      document.body.removeChild(modal);
    }
  }

  return modal;
}

支持Promise的模态框

JavaScript实现

function showModal(options) {
  return new Promise((resolve) => {
    const modal = document.createElement('div');
    modal.className = 'modal';

    const modalContent = document.createElement('div');
    modalContent.className = 'modal-content';

    const closeBtn = document.createElement('span');
    closeBtn.className = 'close';
    closeBtn.innerHTML = '×';

    const message = document.createElement('p');
    message.textContent = options.message || '';

    modalContent.appendChild(closeBtn);
    modalContent.appendChild(message);
    modal.appendChild(modalContent);
    document.body.appendChild(modal);

    closeBtn.onclick = function() {
      document.body.removeChild(modal);
      resolve(false);
    }

    if (options.buttons) {
      options.buttons.forEach(btn => {
        const button = document.createElement('button');
        button.textContent = btn.text;
        button.onclick = function() {
          document.body.removeChild(modal);
          resolve(btn.value);
        };
        modalContent.appendChild(button);
      });
    }

    window.onclick = function(event) {
      if (event.target === modal) {
        document.body.removeChild(modal);
        resolve(false);
      }
    }
  });
}

动画效果增强

CSS添加动画

.modal-content {
  animation-name: animatetop;
  animation-duration: 0.4s;
}

@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
}

JavaScript调整

function openModal() {
  modal.style.display = "block";
  modal.querySelector('.modal-content').classList.add('animate');
}

响应式设计优化

CSS媒体查询

@media screen and (max-width: 600px) {
  .modal-content {
    width: 95%;
    margin: 10% auto;
  }
}

可复用组件实现

JavaScript类实现

class Modal {
  constructor(options) {
    this.options = options;
    this.modal = null;
    this.init();
  }

  init() {
    this.modal = document.createElement('div');
    this.modal.className = 'modal';

    const modalContent = document.createElement('div');
    modalContent.className = 'modal-content';

    const closeBtn = document.createElement('span');
    closeBtn.className = 'close';
    closeBtn.innerHTML = '×';

    const title = document.createElement('h2');
    title.textContent = this.options.title || '';

    const body = document.createElement('div');
    body.innerHTML = this.options.body || '';

    modalContent.appendChild(closeBtn);
    modalContent.appendChild(title);
    modalContent.appendChild(body);
    this.modal.appendChild(modalContent);

    closeBtn.onclick = () => this.close();

    window.onclick = (event) => {
      if (event.target === this.modal) {
        this.close();
      }
    };
  }

  open() {
    document.body.appendChild(this.modal);
  }

  close() {
    document.body.removeChild(this.modal);
  }
}