如何确保Bootstrap Modal首次显示时始终展示初始内容？

你可以利用Bootstrap Modal提供的show.bs.modal事件实现需求——这个事件会在Modal即将显示前触发，正好适合在这里重置内容为初始状态。

修改步骤： #

1. 先保存Modal内容的初始状态（用jQuery简化选择器更便捷）：

var initialModalContent = $('.modal-content').html();

2. 给Modal绑定show.bs.modal事件，每次显示前强制重置内容：

$('.modal').on('show.bs.modal', function() {
  // 将modal-content恢复为初始内容
  $(this).find('.modal-content').html(initialModalContent);
});

3. 简化打开Modal的按钮事件（内容重置已经由事件处理，无需手动设置modal-body）：

$("#plan_templates").click(function() {
  $(".modal").modal("show");
});

4. 保留你原来的.tplan点击事件不变，它负责在Modal打开后切换内容：

$(".tplan").click(function() {
   var index = $(".tplan").index(this);
   $('.modal').find('.modal-content').html($('.tab').eq(index).html());
});

为什么这样有效？ #

show.bs.modal事件会在任何方式触发Modal显示前执行，不管用户是第一次打开，还是之前修改过内容后再次打开，都会先把Modal内容恢复到初始状态，之后再展示，完美符合你“每次首次显示都展示初始内容”的需求。

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