hidden.bs.modal 获取bootstrap 模态框里的值

要获取 Bootstrap 模态框里的值，可以使用 jQuery 的 `.find()` 方法找到模态框中的元素，然后获取其值。例如，假设你的模态框中有一个表单，其中有一个输入框的 id 为 `input1`，你可以通过以下代码获取该输入框的值：

var modal = $('#myModal'); // 获取模态框元素
var inputVal = modal.find('#input1').val(); // 获取输入框的值

需要注意的是，上述代码只有在模态框已经完全加载并显示出来后才能生效，因此最好在模态框的 `shown.bs.modal` 事件中执行该代码，例如：

$('#myModal').on('shown.bs.modal', function () {
  var inputVal = $(this).find('#input1').val(); // 获取输入框的值
  console.log(inputVal);
});

相关问题

bootstrap hidden.bs.modal 没有relatedTarget

`hidden.bs.modal` 事件是在模态框的 `hide` 方法被调用之后触发的，它没有 `relatedTarget` 属性。相反，它具有 `target` 属性，该属性指示触发事件的元素（即模态框本身）。如果需要在模态框隐藏之前执行一些操作并且需要相关的目标元素，可以考虑使用 `hide.bs.modal` 事件。该事件在隐藏模态框之前触发，它具有 `relatedTarget` 属性，该属性指示触发事件的元素（即触发模态框隐藏的按钮或链接）。

bootstrap 模态框显示，带参数

### 如何在 Bootstrap 中创建带参数的模态框

#### 创建基本结构
为了创建一个带有特定参数的模态框，在 HTML 结构中需遵循一定的标准。首先定义触发器元素，通常是一个按钮，该按钮具有 `data-bs-toggle` 和 `data-bs-target` 属性以指明目标模态框[^1]。

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  启动模态框
</button>

接着是模态框本身的标记，它应该被包裹在一个拥有唯一 ID 的 div 内，并设置相应的 ARIA 属性以便于辅助技术识别。

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
        ...
      </div>

      <!-- 可选：模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>

#### 添加额外配置项
除了上述基础属性外，还可以利用其他类来自定义模态框的行为和样式。例如：

- **调整尺寸**：通过附加 `.modal-sm`, `.modal-lg`, 或者 `.modal-xl` 来控制宽度；
- **中心化显示**：应用 `.modal-dialog-centered` 让对话框沿页面高度方向居中；
- **启用过渡效果**：给最外层容器加上 `.fade` 类可实现淡入/淡出的效果；

对于更复杂的交互需求，则可能涉及到 JavaScript API 调用来动态设定更多选项或监听事件处理程序[^2]。