Bootstrap Modal：通过模态框输入值修改触发元素属性

你已经掌握了获取模态框触发元素和输入值的基础方法，现在只需要把这两部分串联起来就行——核心是在模态框弹出时暂存触发元素，等用户确认输入后，用这个暂存的元素配合输入值来修改样式。下面是具体实现方案：

步骤1：暂存触发元素 #

在模态框的show.bs.modal事件中，把触发元素（e.relatedTarget）存储起来，这里推荐用模态框的data属性来保存，避免使用全局变量造成污染：

$('#myModal').on('show.bs.modal', function (e) {
  // 将触发元素存入模态框的data属性中
  $(this).data('triggerElement', $(e.relatedTarget));
});

步骤2：监听保存操作并修改样式 #

你的保存按钮带有data-dismiss="modal"，所以可以监听按钮的点击事件，先获取输入值，再取出之前暂存的触发元素，最后修改它的样式。这里优先监听保存按钮的点击，而不是hidden.bs.modal，因为用户可能点击右上角关闭按钮，这时候不需要执行修改操作：

$('#myModal .btn-primary').on('click', function () {
  // 获取模态框中的输入值
  const inputColor = $('#input-id').val().trim();
  // 取出之前暂存的触发元素
  const triggerElement = $('#myModal').data('triggerElement');
  
  // 简单验证：如果输入不为空，再修改样式
  if (inputColor && triggerElement) {
    triggerElement.css('background', inputColor);
  }
  
  // 清空输入框，方便下次使用
  $('#input-id').val('');
});

完整代码示例 #

把上面的JS代码和你的HTML结合起来，完整的实现如下：

<!-- 触发元素 -->
<div style="background: white;" data-toggle="modal" data-target="#myModal">
  <span>Some text</span>
</div>
<div style="background: white;" data-toggle="modal" data-target="#myModal">
  <span>Some text</span>
</div>
<div style="background: white;" data-toggle="modal" data-target="#myModal">
  <span>Some text</span>
</div>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="MyNewModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Exit">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="input-id" class="col-form-label">Color:</label>
          <input type="text" class="form-control" id="input-id" placeholder="比如：red 或 #ff0000">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  // 暂存触发元素
  $('#myModal').on('show.bs.modal', function (e) {
    $(this).data('triggerElement', $(e.relatedTarget));
  });

  // 处理保存操作
  $('#myModal .btn-primary').on('click', function () {
    const inputColor = $('#input-id').val().trim();
    const triggerElement = $('#myModal').data('triggerElement');
    
    if (inputColor && triggerElement) {
      triggerElement.css('background', inputColor);
    }
    
    $('#input-id').val('');
  });
});
</script>

额外优化建议 #

• 可以给输入框加颜色格式验证（比如检查是否是有效的颜色值），避免无效输入导致样式异常；
• 如果需要支持更直观的颜色选择，可以把输入框换成<input type="color">，用户能直接取色，体验更好。

内容的提问来源于stack exchange，提问作者Steve