JavaScript 消息框效果【实现代码】

JavaScript 消息框效果指的是在网页中弹出一些提示信息的效果，通常包括警告、确认、提示等类型。以下是实现该效果的完整攻略。

1. HTML 结构和样式

首先，我们需要创建 HTML 结构和样式，来实现弹出框的界面。以下是一个简单的 HTML 结构：

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

这个 HTML 结构包括了一个弹出框的所有元素，包括标题、内容、按钮等。为了让弹出框样式更美观，我们可以使用 Bootstrap 提供的样式：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">

2. JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现弹出框的功能。以下是实现弹出框的主要函数：

function showAlert(title, message, callback) {
  // 创建弹出框元素
  var modal = createElement('div', {
    className: 'modal fade',
    id: 'alertModal',
    tabindex: '-1',
    role: 'dialog',
    'aria-labelledby': 'alertModalLabel',
    'aria-hidden': 'true',
  });

  var modalDialog = createElement('div', { className: 'modal-dialog' });
  modal.appendChild(modalDialog);

  var modalContent = createElement('div', { className: 'modal-content' });
  modalDialog.appendChild(modalContent);

  // 创建弹出框头部
  var modalHeader = createElement('div', { className: 'modal-header' });
  modalContent.appendChild(modalHeader);

  var closeButton = createElement('button', {
    type: 'button',
    className: 'close',
    'data-dismiss': 'modal',
    'aria-label': 'Close',
  }, '<span aria-hidden="true">&times;</span>');
  modalHeader.appendChild(closeButton);

  var modalTitle = createElement('h5', { className: 'modal-title' }, title);
  modalHeader.appendChild(modalTitle);

  // 创建弹出框内容
  var modalBody = createElement('div', { className: 'modal-body' }, message);
  modalContent.appendChild(modalBody);

  // 创建弹出框底部
  var modalFooter = createElement('div', { className: 'modal-footer' });
  modalContent.appendChild(modalFooter);

  var cancelButton = createElement('button', {
    type: 'button',
    className: 'btn btn-secondary',
    'data-dismiss': 'modal',
  }, '取消');
  modalFooter.appendChild(cancelButton);

  var okButton = createElement('button', {
    type: 'button',
    className: 'btn btn-primary',
    'data-dismiss': 'modal',
  }, '确定');
  modalFooter.appendChild(okButton);

  // 将弹出框元素插入到 DOM 中
  document.body.appendChild(modal);

  // 注册确定按钮的事件处理函数
  okButton.addEventListener('click', function() {
    if (callback) {
      callback();
    }
  });

  // 显示弹出框
  $('#' + modal.id).modal('show');
}

function createElement(tagName, attributes, content) {
  var element = document.createElement(tagName);
  for (var attr in attributes) {
    element.setAttribute(attr, attributes[attr]);
  }
  if (content) {
    element.innerHTML = content;
  }
  return element;
}

这个函数的作用是创建一个弹出框，显示指定的标题和内容，并提供取消和确定按钮。具体实现的过程如下：

• 首先，使用 createElement 函数创建出弹出框的各个元素，包括弹出框本身、头部、内容、底部等。
• 然后，将弹出框的元素插入到页面的 DOM 中。
• 最后，注册确定按钮的点击事件处理函数，当用户点击确定按钮时，调用回调函数。

为了方便使用，可以将 showAlert 函数封装成多个不同类型的函数，如提示、确认和警告等。

以下是两个示例，分别演示如何以弹出框的方式显示提示信息和确认信息：

function showConfirm(title, message, okFn, cancelFn) {
  showAlert(title, message, function() {
    if (okFn) {
      okFn();
    }
  });

  var cancelButton = document.querySelector('#alertModal .modal-footer button:nth-child(1)');
  if (cancelButton) {
    cancelButton.addEventListener('click', function() {
      if (cancelFn) {
        cancelFn();
      }
    });
  }
}

function showAlertMessage(message) {
  showAlert('提示', message);
}

可以看到，调用 showConfirm 函数时，会显示一个带有取消和确定按钮的弹出框，并提供两个回调函数。当用户点击确定按钮时，会调用 okFn 函数，同时关闭弹出框；当用户点击取消按钮时，会调用 cancelFn 函数，并关闭弹出框。而调用 showAlertMessage 函数时，只会显示一个带有“提示”标题的弹出框，并显示指定的提示信息。