为什么我'在关闭第一模态对话框之后,m不能显示第二模态对话框
Why I'm not able to show second modal dialog after closing the first modal dialog?
我的网站使用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 *');
之后执行是否停止,并且最后两个语句没有执行。
请有人帮我解决问题。
谢谢。
在JS脚本中,下面一行可能会导致第二个模态不显示,因为它有.modal
类,这在两个模态中都很常见
$(this).closest('.modal').modal('hide');
第二个原因可能是打开第二模态的CCD_ 4标签中没有CCD_。
<a href="#" data-target="#myModal-edit-event" class="list-group-item" id="edit-event">Edit Event</a>
数据属性data-toggle
和data-target
都是必需的,没有另一个就不能工作。
对于关闭第一模态和打开第二模态的简单方法
从<a>
标签中删除href="#" data-target="#myModal-edit-event" id="edit-event"
无需点击功能
$('#myModal-event').on('click', '#edit-event', function (event) {
});
具有数据属性data-dismiss="modal"
的简单闭合第一模态
<a data-dismiss="modal" class="list-group-item">Edit Event</a>
一旦第一个模态关闭,使用模态事件hidden.bs.modal
打开第二个模态。
$(document).ready(function(){
$('#myModal-event').on('hidden.bs.modal', function () {
$('#myModal-edit-event').modal('show');
});
});
工作示例
$(document).ready(function(){
$('#myModal-event').on('hidden.bs.modal', function () {
$('#myModal-edit-event').modal('show');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal-event">Open Modal</button>
<div 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 data-dismiss="modal">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>
<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>
旁注:在第一模态中有这个重复的modal-content
类
<div class="modal-content" style="border:0;">
<div style="margin-top: 10px;" role="document" class="modal-dialog event-planner">
<div class="modal-content">
//Rest of the Modal Content
</div>
</div>
</div>
尝试以下解决方案
$('#edit-event').on('click', function(){
/* Hide event modal */
$('#myModal-event').modal('hide');
/* Show edit event modal */
$('#myModal-edit-event').modal('show');
});
相关文章:
- 使用模态对话框(JQuery)编辑函数
- jQuery模态弹出的行为类似于确认和警报对话框
- jquery模态对话框通过id获取输入类型text的值
- ASP.net按钮单击时不使用Jquery模态对话框激发
- jBox模态对话框Created监听器函数从第二次开始就不起作用了
- 模态对话框与指令在角度,范围问题
- 模态对话框加载 jquery 在控制台中执行,但不从应用程序加载.js
- 让 JavaScript 函数等待 Jquery 对话框模态的结果
- 我怎样才能用javascript找出模态对话框的宽度和高度
- 在模态对话框中按键事件
- 带有 D3 图的引导模态对话框
- 跨浏览器显示模态对话框替换
- 基于Ionic和AngularJS的模态对话框导致应用程序冻结
- AngularJS 模态对话框表单对象在控制器中未定义
- JQuery 如何在按钮单击时启动模态框(对话框)
- 引导 3 - 模态背景不会根据模态对话框的高度调整大小
- 什么's是处理在JavaScript中显示对话框/模态的最有效方法
- 从子页调用对话框模态窗口时未关闭
- 创建一个带有参数的JQuery对话框模态函数
- 不确定如何使用jQuery UI对话框模态弹出