js提示框标题怎么改

JS提示框标题怎么改：使用自定义模态框、替换默认alert方法、使用第三方库、修改CSS样式

在JavaScript中，原生的alert、confirm和prompt方法并没有提供直接修改标题的选项。要更改提示框的标题，我们可以使用自定义模态框、替换默认的alert方法、使用第三方库、修改CSS样式。下面将详细介绍如何通过这些方法实现这一目标。

一、自定义模态框

自定义模态框是最灵活的方法之一，允许你完全控制提示框的外观和行为。你可以使用HTML、CSS和JavaScript来创建一个模态框，并且可以轻松添加标题、内容和按钮。

1、创建HTML结构

首先，我们需要创建一个基本的HTML结构来表示模态框。

<div id="customModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2 id="modalTitle">默认标题</h2>
    <p id="modalMessage">这是一个自定义模态框。</p>
    <button id="modalButton">确认</button>
  </div>
</div>

2、添加CSS样式

接下来，我们需要添加一些CSS样式来使模态框看起来更好。

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  padding-top: 60px;
}
.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

3、编写JavaScript代码

最后，我们需要编写JavaScript代码来控制模态框的显示和隐藏。

function showModal(title, message) {
  var modal = document.getElementById("customModal");
  var modalTitle = document.getElementById("modalTitle");
  var modalMessage = document.getElementById("modalMessage");
  modalTitle.innerText = title;
  modalMessage.innerText = message;
  modal.style.display = "block";
  var closeButton = document.getElementsByClassName("close")[0];
  closeButton.onclick = function() {
    modal.style.display = "none";
  }
  var confirmButton = document.getElementById("modalButton");
  confirmButton.onclick = function() {
    modal.style.display = "none";
    // 在这里执行确认操作
  }
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
}
// 调用函数展示模态框
showModal("新的标题", "这是一个新的提示信息。");

二、替换默认alert方法

如果你希望在整个项目中使用自定义提示框，可以考虑替换默认的alert方法。

window.alert = function(message) {
  showModal("警告", message);
}

通过这种方式，所有调用alert的方法都会自动使用自定义模态框。

三、使用第三方库

使用第三方库可以简化自定义模态框的创建和管理。常用的库包括SweetAlert和Bootstrap。

1、SweetAlert

SweetAlert是一个流行的JavaScript库，用于创建漂亮的提示框。

<head>
  <link rel="stylesheet" href="https://unpkg.com/sweetalert/dist/sweetalert.css">
</head>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

使用SweetAlert创建一个带有自定义标题的提示框：

swal({
  title: "自定义标题",
  text: "这是一个自定义提示框。",
  icon: "info",
  button: "确认",
});

2、Bootstrap

Bootstrap也是一个强大的前端框架，提供了内置的模态框组件。

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>

使用Bootstrap创建一个模态框：

<div class="modal" tabindex="-1" role="dialog" id="bootstrapModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="bootstrapModalTitle">默认标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p id="bootstrapModalMessage">这是一个自定义模态框。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
      </div>
    </div>
  </div>
</div>

JavaScript代码：

function showBootstrapModal(title, message) {
  var modalTitle = document.getElementById("bootstrapModalTitle");
  var modalMessage = document.getElementById("bootstrapModalMessage");
  modalTitle.innerText = title;
  modalMessage.innerText = message;
  $('#bootstrapModal').modal('show');
}
// 调用函数展示模态框
showBootstrapModal("新的标题", "这是一个新的提示信息。");

四、修改CSS样式

如果你只需要简单的样式修改，可以考虑通过CSS来覆盖默认样式。

/* 例子：修改alert对话框的样式 */
.alert-box {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  font-size: 16px;
}