我按照HTML来显示引导模式对话框：
<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>
Bootstrap模式对话框代码如下：
<div id="myModal-event" class="modal fade" role="dialog">
<!-- <div role="document" class="modal-dialog"> -->
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true"> x </span></button> -->
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body"> Loading... </div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
和另一个代码如下：
<div class="modal-content">
<!-- <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button> -->
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="event-title">
{$eventDetails.event_details.title}
<input type="hidden" name="hid_event_id" id="hid_event_id" value="{$eventDetails.event_details.event_id}">
</div>
<ul>
<li><img src="{$user_img_url}/time.png" alt=""> {$eventDetails.event_details.start_time_phrase_stamp}</li>
<li><img src="{$user_img_url}/calender.png" alt=""> {$eventDetails.event_details.start_time_phrase}</li>
{if $eventDetails.event_details.location}
<li>
<a href="javascript:void(0)" onClick="viewLocationOnMap();"> <img src="{$user_img_url}/location.png" alt=""></a>
<a href="javascript:void(0)" onClick="viewLocationOnMap();">{$eventDetails.event_details.location}</a>
</li>
{/if}
{if $eventDetails.event_details.group_name}
<li><img src="{$user_img_url}/group_event.png" alt="">Group: {$eventDetails.event_details.group_name}</li>
{/if}
<li><button type="button" class="btn btn-info" data-toggle="popover">Edit Event</button></li>
</ul>
<ul id="popover-content" class="list-group" style="display: none">
<a data-toggle="modal" href="ajax_event_detail.php?event_id={$eventDetails.event_details.event_id}" data-target="#myModal-edit-event" style="cursor: pointer;" class="list-group-item">Edit Event</a>
<a href="#" class="list-group-item">Invite Members</a>
<a href="#" class="list-group-item">Delete Event</a>
</ul>
</div>
<div class="col-sm-6 col-md-6 col-sm-12">
<div class="form-group" align="right">
<select name="user_event_responce" id="user_event_responce" class="form-control" style="width:150px;" >
<option value="0">I am..</option>
<option value="1" {if $myEventGoingStatus eq 'attending_user'} selected="selected" {/if} >Going</option>
<option value="2" {if $myEventGoingStatus eq 'mayBeAttending_user'} selected="selected" {/if} >Maybe</option>
<option value="3" {if $myEventGoingStatus eq 'notComing_user'} selected="selected" {/if}>Not Going</option>
</select>
</div>
<!--
<div class="form-group" align="right">
<select name="event_actions" id="event_actions" class="form-control" style="width:150px;">
<option value=""></option>
<option value="edit_event">Edit Event</option>
<option value="invite_members">Invite members</option>
<option value="delete_event">Delete event</option>
</select>
</div>
-->
</div>
</div>
<hr>
<div class="row">
<div class="event-menu">
<ul class="nav nav-tabs" id="myTab">
<li><a href="#description" data-toggle="tab">Description</a></li>
<li><a href="#feeds" data-toggle="tab">Feeds</a></li>
<li><a href="#going" data-toggle="tab">Going</a></li>
<li><a href="#maybe" data-toggle="tab">Maybe</a></li>
<li><a href="#notgoing" data-toggle="tab">Not Going</a></li>
</ul>
</div>
</div>
<hr>
<div class="tab-content">
<div class="tab-pane active" id="description">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{$eventDetails.event_details.description}
</div>
</div>
</div>
<div class="tab-pane" id="feeds">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
Work In Progress
</div>
</div>
</div>
<div class="tab-pane" id="going">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.attending_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.mayBeAttending_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
<div class="tab-pane" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
{foreach from=$eventDetails.notComing_user item=eachUser key=key}
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="{$eachUser.profile_image}" class="img-event" alt="">
<span class="author">{if $eachUser.full_name neq ''}{$eachUser.full_name}{else}{$eachUser.user_name}{/if}</span>
<span class="degree">{$eachUser.group_name}</span> </div>
</div>
{/foreach}
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
现在我的代码中发生的是用户点击上面的
<div class="panel-body" data-toggle="modal" href="ajax_event_detail.php?event_id=512" data-target="#myModal-event" style="cursor: pointer;"></div>
代码的第一部分打开，然后数据提取继续，然后突然第二部分代码，即提取的数据被添加到模态。我不明白这是怎么回事。
正在执行此操作的jQuery如下所示，但是当我调用隐藏事件等时，我并不了解它正在做什么。请通过让我理解下面的代码来清除我的疑惑。
$('body').on('hidden.bs.modal', '.modal', function () {
console.log('Hi *');
$("#myModal-event .modal-body").html(' Loading... ');
$(this).removeData('bs.modal');
});
感谢。
答案 0 :(得分：6)
当.modal（模态窗口）关闭时执行。因此，无论何时打开类modal的模态窗口（显然），在某些时候它都会被关闭。当该模态窗口被隐藏（或关闭）时，事件hidden.bs.modal被触发并且该函数被执行。
这不是由用户管理的（您没有编写显式代码），但Bootstrap库内置了它。
hidden.bs.modal：当模态完成对用户隐藏时将触发此事件（将等待CSS过渡完成）。
示例代码：
$('#myModal').on('hidden.bs.modal', function (e) {
// do something when this modal window is closed...
});
要回答评论中的查询，您需要：
$("#myModal-event .modal-body").html(' Loading... ');将模态窗口的内容设置为Loading...。$(this).removeData('bs.modal'); - 这告诉Bootstrap清除模态窗口关闭时的所有内容，这样您就不会获得缓存内容。请点击Clear Bootstrap Modal content after close.