【发布时间】：2020-03-31 02:00:59
【问题描述】：
我正在为我的网站使用 Bootstrap v3.3.5。
我有以下第一个引导模式对话框的 HTML 代码：
<div style="display: block;" id="myModal-event" class="modal fade in" role="dialog">
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<div style="margin-top: 10px;" role="document" class="modal-dialog event-planner">
<div class="modal-content">
<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">
NewDemoEvent5
<input name="hid_event_id" id="hid_event_id" value="501" type="hidden">
</div>
<ul id="popover-content" class="list-group" style="display: none">
<a href="#" data-target="#myModal-edit-event" class="list-group-item" id="edit-event">Edit Event</a>
<a href="#" class="list-group-item">Invite Members</a>
<a href="#" class="list-group-item">Delete Event</a>
</ul>
</div>
</div>
<hr>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
当用户点击菜单超链接“编辑事件”时，上面的模态对话框应该关闭，一个新的模态对话框应该打开。
以下是新模态对话框的 HTML：
<div id="myModal-edit-event" class="modal fade" role="dialog">
<div role="document" style="width:600px;position:relative;margin:auto;margin-top:10px;">
<div class="modal-content" style="border:0;">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Event Details</h4>
</div>
<div class="modal-body"> Loading Mannu... </div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
我可以在单击“编辑事件”超链接时关闭第一个模式对话框，但我无法打开新的第二个模式对话框。
我试过下面的代码：
$('#myModal-event').on('click', '#edit-event', function (event) {
event.preventDefault();
$(this).closest('.modal').modal('hide');
$('#myModal-edit-event').modal('show');
});
此外，用于某些其他功能的其他脚本也会被执行。我强烈认为它也影响了我的代码。该脚本如下。
$(document).ready(function() {
$('body').on('hidden.bs.modal', '#myModal-event', function () {
console.log('Hi *');
$("#myModal-event .modal-body").html(' Loading... ');
$(this).removeData('bs.modal');
});
});
在上面的脚本中，我想知道在语句console.log('Hi *'); 之后执行是否停止并且最后两个语句没有被执行。
请有人帮我解决我的问题。
谢谢。
【问题讨论】：
-
只是把它扔在那里......当你真的让它工作......你的用户体验设计将成为用户点击浏览器后退和前进按钮期望在模式之间切换的噩梦。我遇到了同样的事情。如果您将细节放入模态并希望搜索引擎索引这些只能通过模态获得的细节，那么 SEO 也将是一场噩梦
标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-modal