bootstrap模态框传值;bootstrap4模态框

在使用Bootstrap 4的模态框时，我们常常需要在主页面与模态框之间传递数据。为了实现这一点，可以采用以下解决方案：通过HTML、JavaScript（或jQuery）和Bootstrap提供的事件API来操作DOM元素，从而实现在打开模态框之前将需要的数据传递给模态框，并且可以在关闭模态框后获取模态框内修改后的数据。

方法一：利用data属性

HTML结构

在主页面中创建一个按钮用于触发模态框显示，并为该按钮设置data-*自定义属性保存要传递给模态框的数据。同时定义好模态框的基本框架。
```html

打开模态框

</p>

<h3>JavaScript代码</h3>

<p>然后使用JavaScript监听模态框显示前的事件<code>show.bs.modal，在这个事件处理函数中获取按钮上的data-value属性值并将其赋值给模态框内的元素。
javascript
$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // 触发模态框显示的按钮
  var value = button.data('value'); // 获取按钮上的data-value属性值
  var modal = $(this);
  modal.find('#modalData').text(value); // 将数据填充到模态框内指定位置
})


方法二：通过全局变量或对象

除了使用data-*属性外，还可以将要传递的数据存储在一个全局变量或者全局对象中，当点击按钮时更新这个全局变量或对象的内容，然后在模态框显示时读取它。

例如：
```javascript
var globalData = {}; // 定义全局对象

// 当点击按钮时更新全局对象
$('.open-modal-btn').click(function(){
    globalData.someKey = 'someValue';
});

// 在模态框显示时读取全局对象
$('#myModal').on('show.bs.modal', function () {
    $('#modalData').text(globalData.someKey);
});

这种方法虽然简单直接，但在大型项目中可能会导致代码难以维护，因此一般只适用于小型应用或临时性的需求。

方法三：使用隐藏输入框

如果需要传递的数据比较复杂（如表单数据），可以考虑在主页面中创建隐藏的输入框来保存这些数据，然后在模态框中通过JavaScript访问这些隐藏输入框的值。

例如：
```html

```

javascript
$('#myModal').on('show.bs.modal', function () {
var hiddenValue = $('#hiddenInput').val();
$('#modalData').text(hiddenValue);
});


以上三种方法都可以实现Bootstrap 4模态框的传值功能，具体选择哪种方式取决于实际应用场景和个人偏好。