当模态关闭事件 - JavaScript

在网页中经常会使用到模态框来展示内容或者收集用户信息。当用户关闭模态框时，我们需要执行一些具体的操作，比如清空输入框、更新数据等操作。在 JavaScript 中，我们可以监听模态关闭事件来实现这些操作。

监听模态关闭事件

在 JavaScript 中，我们可以使用 JavaScript EventListener 来监听模态关闭事件。具体代码如下：

document.getElementById("yourModalId").addEventListener("hidden.bs.modal", function () {
    // 执行你的操作
});

其中，"hidden.bs.modal" 表示模态框隐藏的事件。因为不同的框架可能对应不同的事件名称，所以我们需要确认当前框架对应的事件名称。

实例

假设我们有一个表单模态框，用户在这个模态框中输入一些信息然后提交。我们需要在提交后更新页面中的某些元素，并且清空输入框中的内容。

具体代码如下：

<!-- 模态框 -->
<div class="modal fade" id="yourModalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form>
        <!-- 输入框 -->
        <div class="form-group">
          <label for="exampleInputName">Name</label>
          <input type="text" class="form-control" id="exampleInputName" placeholder="Enter name">
        </div>
        <!-- 提交按钮 -->
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>

<!-- 更新页面中的某些元素的代码 -->
<div id="updateElement"></div>

<!-- JavaScript 代码 -->
<script>
  // 监听模态关闭事件
  document.getElementById("yourModalId").addEventListener("hidden.bs.modal", function () {
    // 清空输入框中的内容
    document.getElementById("exampleInputName").value = "";
    // 更新页面中的某些元素
    document.getElementById("updateElement").innerText = "更新成功";
  });
</script>

当用户关闭模态框时，页面中的输入框内容会被清空，同时 updateElement 元素的内容会被更新。