Question

我在网站上使用 Bootstrap v3.3.5 。

我有以下第一个bootstrap模式对话框的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>

当用户点击菜单超链接＆＃34;编辑活动＆＃34; 时，上面的模态对话框应该关闭，新的模态对话框应该打开。

以下是新模态对话框的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>

点击＆＃34;编辑活动＆＃34;我能够关闭第一个模态对话框。超链接，但我无法打开新的第二个模态对话框。

我尝试了以下代码：

$('#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 *');之后执行是否停止，以及最后两个语句是否都没有执行。

有人请在我的问题上帮助我。

感谢。

Answer 1

在JS脚本中，以下行可能导致第二个模态不显示，因为它具有.modal类，这在两个模态中都很常见

 $(this).closest('.modal').modal('hide');

，第二个原因可能是data-toggle标签中没有<a>属性，这会打开第二个模态。

<a href="#" data-target="#myModal-edit-event" class="list-group-item" id="edit-event">Edit Event</a>

数据属性data-toggle和data-target都是必需的，没有其他数据属性就行不通。

简单方法关闭第一模态并打开第二模态

从href="#" data-target="#myModal-edit-event" id="edit-event"代码

中删除<a>

无需点击功能

$('#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>

SideNote：你在First Modal中有这个重复的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>

Answer 2

请尝试以下解决方案。

$('#edit-event').on('click', function(){
    /* Hide event modal */
    $('#myModal-event').modal('hide');

    /* Show edit event modal */
    $('#myModal-edit-event').modal('show');
});

关闭第一个模态对话框后，为什么我无法显示第二个模态对话框？

2 个答案: