为什么我无法在单击同一模式对话框中存在的超链接时关闭模式对话框？

Question

我有以下 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>

我应该怎么做。我尝试了很多方法，但 none 对我有用。

请帮帮我

Answer 1

两个模态具有相同的 ID。更改第二个模态的 ID（例如 myModal-event-2）。

然后试试下面的代码：

$(function(){
  $('.list-group-item').click(function(){
    $('#myModal-event').modal('hide');
    $('#myModal-event-2').modal('show');
  });
});

Answer 2

为第二个模式设置一个新的 ID，这样您就可以同时管理它们。您可以为您的编辑事件设置一个 ID link，这样您就可以在其上收听点击事件。

因此您的 link 看起来像：

<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');
});

Answer 3

要关闭模态对话框，相应的 button/link 需要 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）

为什么我无法在单击同一模式对话框中存在的超链接时关闭模式对话框？

Why I'm not able to close the modal dialog upon click on a hyperlink which is present on the same modal dialog?

jquery

modal-dialog

twitter-bootstrap

bootstrap-modal

twitter-bootstrap-3