我有以下HTML代码的bootstrap模式：
<div style="display: block; padding-right: 13px;" id="myModal-event" class="modal fade in" 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;">
<div role="document" class="modal-dialog event-planner">
<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">
NewDemoEvent5
<input name="hid_event_id" id="hid_event_id" value="501" type="hidden">
</div>
<ul>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/time.png" alt=""> 12:00 pm</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/calender.png" alt=""> Thursday, January 7</li>
<li>
<a href="javascript:void(0)" onclick="viewLocationOnMap();"> <img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/location.png" alt=""></a>
<a href="javascript:void(0)" onclick="viewLocationOnMap();">Home Nightclub, Sydney, New South Wales, Australia</a>
</li>
<li><img src="http://localhost/CKWEB_28-12-2015/user_ui_files/images/group_event.png" alt="">Group: Boxing Day</li>
<li><button aria-describedby="popover295861" title="" data-original-title="" type="button" class="btn btn-info" data-toggle="popover">Edit Event</button><div style="top: 140.717px; left: 104px; display: block;" id="popover295861" class="popover fade right in" role="tooltip"><div style="top: 63.9954%;" class="arrow"></div><h3 style="display: none;" class="popover-title"></h3><div class="popover-content">
<a href="#" 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>
</div></div></li>
</ul>
<ul id="popover-content" class="list-group" style="display: none">
<a href="javascript:alert('You clicked me')" 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" selected="selected">Going</option>
<option value="2">Maybe</option>
<option value="3">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 class="active"><a aria-expanded="true" 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">
DemoEvent5 is added successfully.
</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">
<div class="col-md-2 col-sm-2 col-xs-12 no-padding">
<div class="block"> <img src="http://app.campusknot.com/file/pic/user/1585_100_square.jpg" class="img-event" alt="">
<span class="author">Sushil Kadam</span>
<span class="degree"></span> </div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="maybe">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
<div class="tab-pane" id="notgoing">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
我想点击超链接编辑活动关闭上述模式，然后打开一个新模式，如下所示：
<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>
Hos我应该这样做。我尝试了很多方法，但没有一个适合我。
请帮帮我。
答案 0 :(得分：1)
两个模态都有相同的ID。更改第二个模态的id（ex.myModal-event-2）。
然后尝试以下代码：
$(function(){
$('.list-group-item').click(function(){
$('#myModal-event').modal('hide');
$('#myModal-event-2').modal('show');
});
});
答案 1 :(得分：1)
为第二个模态设置一个新ID，以便您能够管理它们。您可以为“编辑事件”链接设置一个ID，以便您可以在其上收听点击事件。
因此，您的链接看起来像是：
<a href="#" id='edit-event' class="list-group-item">Edit Event</a>
使用jQuery，你可以做到：
$('#myModal-event').on('click', '#edit-event', function (event) {
event.preventDefault();
$(this).closest('.modal').modal('hide');
$('#modal-2').modal('show');
});
答案 2 :(得分：0)
要关闭模态对话框，相应的按钮/链接需要data-dismiss属性。
替换
<a href="#" class="list-group-item">Edit Event</a>
使用
<a href="#" class="list-group-item" data-dismiss="modal">Edit Event</a>
（其中"modal"是模态对话框的ID）