引导模式：关闭当前，打开新答案

【问题标题】：Bootstrap modal: close current, open new引导模式：关闭当前，打开新
【发布时间】：2013-08-15 13:41:29
【问题描述】：

我已经寻找了一段时间，但我找不到解决方案。我想要以下内容：

在 Bootstrap 模式中打开一个 URL。我有这个工作不正常。所以内容是动态加载的。
当用户在此模式中按下按钮时，我希望隐藏当前模式，然后立即使用新 URL（用户单击）打开一个新模式。第二个模态的这个内容也是动态加载的。
如果用户随后关闭了第二个模态，则第一个模态必须再次返回。

我已经盯着这个好几天了，希望有人能帮助我。

提前致谢。

【问题讨论】：

引导程序 2 还是 3？你能设置一个你所拥有的 JS Fiddle 吗？
引导程序 2.3.1。由于动态内容，我想我无法设置 JS Fiddle
详细博客：sforsuresh.in/…

标签： javascript jquery twitter-bootstrap

【解决方案1】：

我知道这是一个迟到的答案，但它可能有用。正如上面提到的@karima 所说，这是完成此任务的正确且干净的方法。您实际上可以一次触发两个函数； trigger 和 dismiss 模态。

HTML 标记；

<!-- Button trigger modal -->
<ANY data-toggle="modal" data-target="TARGET">...</ANY>

<div class="modal fade" id="SELECTOR" tabindex="-1">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body"> ... </div>
     <div class="modal-footer">           <!-- ↓ -->  <!--      ↓      -->
      <ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal">...</ANY>
     </div>
   </div>
  </div>
</div>

Demo

【讨论】：

没有，因为您会注意到，在打开第一个模式后，滚动页面可以正常工作，但是如果您从现有模式启动另一个模式，则滚动会转到背景。如果您有一个需要滚动的模式（例如，如果您在移动设备上查看），这将是一个大问题。
我有一个非常相似的问题，但有角度。您知道如何在 Angular 控制器中使用 templateUrl 和 windowClass 属性做同样的事情吗？
谢谢 - 对我有用。我的主要问题是我错过了按钮上的data-dismiss="modal"
@Mahmoud ，嘿，有什么办法可以避免在从一个模态加载第二个模态时产生振动效果吗？以及如何避免额外的滚动？
这是一个浏览器问题，在谷歌浏览器中更改模式、关闭或打开时会“摇晃”。在 html、body css 上尝试 -webkit-backface-visibility: hidden;

【解决方案2】：

没有看到具体的代码，很难给你一个准确的答案。但是，从 Bootstrap 文档中，您可以像这样隐藏模式：

$('#myModal').modal('hide')

然后，在隐藏后显示另一个模态：

$('#myModal').on('hidden.bs.modal', function () {
  // Load up a new modal...
  $('#myModalNew').modal('show')
})

您将不得不找到一种将 URL 推送到新模式窗口的方法，但我认为这很简单。如果没有看到代码，很难举一个例子。

【讨论】：

很奇怪，我让它与 Bootstrap 3 一起使用。我认为我的代码与 Bootstrap 工具提示有冲突，并且在版本 3 中进行了更改。谢谢
在 bootstrap v3 事件是 'hidden.bs.modal'
具有数据关闭的解决方案更加优雅（至少在 2015 年）并且不需要任何非引导 javascript。
谢谢@coure2011
data-toggle="modal" data-target="#targetmodal" data-dismiss="modal" 这很好用。

【解决方案3】：

这不完全是响应，但当您想要关闭当前模式并打开一个新模式时它很有用。

在同一个按钮的html中，可以用data-dismiss请求关闭当前的modal，直接用data-target打开一个新的modal：

<button class="btn btn-success" 
data-toggle="modal" 
data-target="#modalRegistration" 
data-dismiss="modal">Register</button>

【讨论】：

data-dismiss="modal" 的问题是，当您关闭第二个模式时，它会将您的内容向左移动。
嗯。这种方法对我不起作用。第一个消失了，第二个永远不会出现
我不确定你有什么问题，Kevin，但它对我来说用 Bootstrap 3 工作得很好。第一个模式消失了，另一个打开就好了 :)
为我工作得很好！并且非常简单的解决方案。谢谢！
简单并找到作为显示和隐藏模态的最佳解决方案。

【解决方案4】：

data-dismiss="modal" 的问题是它会将您的内容向左移动

我正在分享对我有用的东西，问题陈述是从 pop2 打开 pop1

JS 代码

var showPopup2 = false;
$('#popup1').on('hidden.bs.modal', function () {
    if (showPopup2) {
        $('#popup2').modal('show');
        showPopup2 = false;
    }
});

$("#popup2").click(function() {
    $('#popup1').modal('hide');
    showPopup2 = true;
});

【讨论】：

这么简单的解决方案:)

【解决方案5】：

我用这个方法：

$(function() {
  return $(".modal").on("show.bs.modal", function() {
    var curModal;
    curModal = this;
    $(".modal").each(function() {
      if (this !== curModal) {
        $(this).modal("hide");
      }
    });
  });
});

【讨论】：

【解决方案6】：

通过使用以下代码，您可以隐藏第一个模态并立即打开第二个模态，通过使用相同的策略，您可以隐藏第二个模态并显示第一个。

$("#buttonId").on("click", function(){
    $("#currentModalId").modal("hide");
    $("#currentModalId").on("hidden.bs.modal",function(){
    $("#newModalId").modal("show");
    });
});

【讨论】：

也修复了滚动问题

【解决方案7】：

您需要将以下属性添加到要添加此功能的链接或按钮：

 data-dismiss="modal" data-toggle="modal" id="forgotPassword" data-target="#ModalForgotPassword"

详细博客：http://sforsuresh.in/bootstrap-modal-window-close-current-open-new-modal/

【讨论】：

与 bootstrap 4 完美配合。

【解决方案8】：

data-dismiss="modal"

用于关闭已打开的模型。您可以将其设置为新模型

【讨论】：

我不认为这适用于所有版本的引导程序。在我的情况下，关闭模式会导致模式关闭并打开新模式，但它也会从正文中删除模式类，然后我无法向下滚动模式。

【解决方案9】：

如上所述，在同一个按钮的html中，可以用data-dismiss请求关闭当前的modal，直接用data-target打开一个新的modal：

<button class="btn btn-success" data-toggle="modal" data-target="#modalRegistration" data-dismiss="modal">Register</button>

但这会导致滚动条消失，你会注意到如果第二个模态比第一个高

所以解决方法是在modal内联样式中添加如下样式：

Style = "overflow-y : scroll ; "

【讨论】：

【解决方案10】：

对于 Bootstrap v4

您可以通过将data-dismiss="modal" 和data-toggle="modal" 放在同一个HTML 元素中来切换模式。您还需要将data-target 属性设置为您要打开的模式。

这是一个例子：

<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#Modal2" >
Open second modal
</button>

记得为每个模态框设置一个 id，并让数据目标指向你要打开的那个

对于引导程序 v5

与 v4 相同，只是使用属性 data-bs-toggle data-bs-dismiss 和 data-bs-target

像这样：

<button class="btn btn-primary" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#Modal2" >
Open second modal
</button>

他们已经包含了这个in the v5 documentation的一个例子

注意：

这两个模态需要相互独立，而不是相互嵌套，这样才能工作。因此，如果您使用的是 MVC 框架，例如 ASP.NET MVC，并且将第一个模态作为其自己的局部视图，则不能在该视图中拥有第二个模态。您需要将第二个模式放在父视图中。

【讨论】：

【解决方案11】：

使用 BootStrap 3，你可以试试这个：-

var visible_modal = jQuery('.modal.in').attr('id'); // modalID or undefined
if (visible_modal) { // modal is active
    jQuery('#' + visible_modal).modal('hide'); // close modal
}

经测试可使用：http://getbootstrap.com/javascript/#modals（首先单击“启动演示模式”）。

【讨论】：

我认为您不需要.attr 位，是吗？这不是同样有效吗？ var visible_modal = jQuery('.modal.in'); if (visible_modal) { visible_modal.modal('hide'); }.

【解决方案12】：

我有完全相同的问题，我的解决方案是仅当模态对话框具有 [role="dialog"] 属性：

/*
* Find and Close current "display:block" dialog,
* if another data-toggle=modal is clicked
*/
jQuery(document).on('click','[data-toggle*=modal]',function(){
  jQuery('[role*=dialog]').each(function(){
    switch(jQuery(this).css('display')){
      case('block'):{jQuery('#'+jQuery(this).attr('id')).modal('hide'); break;}
    }
  });
});

【讨论】：

jsfiddle.net/e6x4hq9h/7 我试过这个，它在我第一次打开模态时有效，但以后就不行了。

【解决方案13】：

我遇到了与@Gravity Grave 相同的问题，即如果您使用滚动将不起作用

data-toggle="modal" data-target="TARGET-2"

结合

data-dismiss="modal"

滚动无法正常工作并恢复为滚动页面而不是模式。这是由于 data-dismiss 从标签中删除了 modal-open 类。

我最后的解决方案是在modal上设置内部组件的html，并使用css来淡入淡出文字。

【讨论】：

【解决方案14】：

有同样的问题，写在这里，以防将来有人偶然发现这个问题并且对 multiple 模态也必须有 scrolling 有问题（I' m 使用 Bootstrap 3.3.7)

我所做的是在我的第一个模态框内有一个这样的按钮：

<div id="FirstId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_2">Open modal</div>

它将隐藏第一个然后显示第二个，在第二个模式中我会有一个如下所示的关闭按钮：

<div id="SecondId" data-dismiss="modal" data-toggle="modal" data-target="#YourModalId_1">Close</div>

所以这将关闭第二个模态并打开第一个模态并使滚动工作我添加到我的 .css 文件这一行：

.modal {
overflow: auto !important;
}

PS：顺便说一句，你必须分别拥有这些模态，小模态不能嵌套在第一个中，因为你隐藏了第一个

以下是基于引导模式示例的完整示例：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal 1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Add lorem ipsum here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal2">
          Open second modal
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"  data-toggle="modal" data-target="#exampleModal">Close</button>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案15】：

这段代码，关闭模态打开，打开新模态，但在中间，新模态被关闭。

$(nameClose).modal('hide');
$(nameOpen).modal('show');

我在关闭其他模式后打开新模式的解决方案是：

function swapModals(nameClose,nameOpen) {
    $(nameClose).modal('hide');
    $(nameClose).on('hidden.bs.modal', function () {
        console.log('Fired when hide event has finished!');
        $(nameOpen).modal('show');
    });
}

【讨论】：

【解决方案16】：

使用点击功能：

$('.btn-editUser').on('click', function(){
    $('#viewUser').modal('hide'); // hides modal with id viewUser 
    $('#editUser').modal('show'); // display modal with id editUser
});

注意：

确保您要显示的是一个独立的模态。

【讨论】：

【解决方案17】：

在第一个模态中：

用下面的关闭链接替换页脚中的模态关闭链接。

<div class="modal-footer">
      <a href="#"  data-dismiss="modal" class="btn btn-primary" data-toggle="modal" data-target="#second_model_id">Close</a>
</div>

在第二个模态中：

然后第二个模态将顶部 div 替换为下面的 div 标签。

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add text for disabled people here" aria-hidden="true" id="second_model_id">

【讨论】：

【解决方案18】：

试试这个

    $('#model1').modal('hide');
setTimeout(function(){
    $('#modal2').modal('show');
},400);

【讨论】：

这实际上比公认的解决方案更好，因为没有监听器会永远绑定到关闭模式事件。

【解决方案19】：

在打开一个新的模态之前关闭所有打开的模态

$('.modal').modal('hide'); // close all open modals
$('#login').modal('show'); // open a modal named #login

【讨论】：

【解决方案20】：

$("#buttonid").click(function(){
    $('#modal_id_you_want_to_hid').modal('hide')
});

// same as above button id
$("#buttonid").click(function(){
$('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})});

【讨论】：

$("#buttonid").click(function(){ $('#modal_id_you_want_to_hid').modal('hide') }); // 同上按钮 id $("#buttonid").click(function(){ $('#Modal_id_You_Want_to_Show').modal({backdrop: 'static', keyboard: false})})

【解决方案21】：

我用另一种方式：

$('#showModal').on('hidden.bs.modal', function() {
        $('#easyModal').on('shown.bs.modal', function() {
            $('body').addClass('modal-open');
        });
    });

【讨论】：

【解决方案22】：

如果您想在打开新模式的同时关闭之前打开的模式，那么您必须通过 javascript/jquery 执行此操作，方法是首先关闭当前打开的模式，然后给出 400 毫秒的超时以允许它关闭然后打开新的模式如下代码：

$('#currentModal').modal('hide');

setTimeout(function() {
       //your code to be executed after 200 msecond 
       $('#newModal').modal({
           backdrop: 'static'//to disable click close
   })
}, 400);//delay in miliseconds##1000=1second

如果您尝试使用 data-dismiss="modal" 进行此操作，则会出现 @gravity 和 @kuldeep 在 cmets 中提到的滚动问题。

【讨论】：

【解决方案23】：

没有一个答案对我有帮助，因为我想实现与问题中提到的完全相同的东西。

我为此创建了一个 jQuery 插件。

/*
 * Raj: This file is responsible to display the modals in a stacked fashion. Example:
 * 1. User displays modal A
 * 2. User now wants to display modal B -> This will not work by default if a modal is already displayed
 * 3. User dismisses modal B
 * 4. Modal A should now be displayed automatically -> This does not happen all by itself 
 * 
 * Trying to solve problem for: http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new
 * 
 */

var StackedModalNamespace = StackedModalNamespace || (function() {
    var _modalObjectsStack = [];
    return {
        modalStack: function() {
            return _modalObjectsStack;
        },
        currentTop: function() {
            var topModal = null;
            if (StackedModalNamespace.modalStack().length) {
                topModal = StackedModalNamespace.modalStack()[StackedModalNamespace.modalStack().length-1];
            }
            return topModal;
        }
    };
}());

// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
jQuery.fn.extend({
    // https://api.jquery.com/jquery.fn.extend/
    showStackedModal: function() {
        var topModal = StackedModalNamespace.currentTop();
        StackedModalNamespace.modalStack().push(this);
        this.off('hidden.bs.modal').on('hidden.bs.modal', function(){   // Subscription to the hide event
            var currentTop = StackedModalNamespace.currentTop();
            if ($(this).is(currentTop)) {
                // 4. Unwinding - If user has dismissed the top most modal we need to remove it form the stack and display the now new top modal (which happens in point 3 below)
                StackedModalNamespace.modalStack().pop();
            }
            var newTop = StackedModalNamespace.currentTop();
            if (newTop) {
                // 3. Display the new top modal (since the existing modal would have been hidden by point 2 now)
                newTop.modal('show');
            }
        });
        if (topModal) {
            // 2. If some modal is displayed, lets hide it
            topModal.modal('hide');
        } else {
            // 1. If no modal is displayed, just display the modal
            this.modal('show');
        }
    },
});

Working Fiddle 供参考，JSFiddle：https://jsfiddle.net/gumdal/67hzgp5c/

您只需使用我的新 API“showStackedModal()”而不是“modal('show')”来调用。隐藏部分仍然可以与以前相同，并且自动处理显示和隐藏模态的堆叠方法。

【讨论】：

【解决方案24】：

BootStrap 3.x 的简单而优雅的解决方案。通过这种方式可以重复使用相同的模态。

$("#myModal").modal("hide");
$('#myModal').on('hidden.bs.modal', function (e) {
   $("#myModal").html(data);
   $("#myModal").modal();
   // do something more...
});

【讨论】：

【解决方案25】：

如果您使用 mdb，请使用此代码

    var visible_modal = $('.modal.show').attr('id'); // modalID or undefined
    if (visible_modal) { // modal is active
        $('#' + visible_modal).modal('hide'); // close modal
    }

【讨论】：

【解决方案26】：

<div class="container">
  <h1>Bootstrap modal: close current, open new</h1>
  <p class="text-muted">
  A proper and clean way to get this done without addtional Javascript/jQuery. The main purpose of this demo is was to answer this 
  <a href="http://stackoverflow.com/questions/18253972/bootstrap-modal-close-current-open-new">question on stackoverflow</a>
  </p>
  <hr />

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1">Launch Modal #1</button>
  <button type="button" class="btn btn-info"    data-toggle="modal" data-target="#demo-2">Launch Modal #2</button>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3">Launch Modal #3</button>

  <!-- [ Modal #1 ] -->
  <div class="modal fade" id="demo-1" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #1</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #2 ] -->
  <div class="modal fade" id="demo-2" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #2</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#demo-3" data-dismiss="modal">Close current, Launch Modal #3</button>
        </div>
     </div>
    </div>
  </div>

  <!-- [ Modal #3 ] -->
  <div class="modal fade" id="demo-3" tabindex="-1">
    <div class="modal-dialog">
     <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal"><i class="icon-xs-o-md"></i></button>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title caps"><strong>Demo Modal #3</strong></h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Input Placeholder..." />
            <span class="input-group-btn"><button class="btn btn-default" type="button">Action</button></span>
          </div>
        </div>
      </div>
       <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">&times;</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#demo-1" data-dismiss="modal">Close current, Launch Modal #1</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo-2" data-dismiss="modal">Close current, Launch Modal #2</button>
        </div>
     </div>
    </div>
  </div>

  <hr />
  <h3 class="caps">Usage:</h3>
<pre class="prettyprint">&lt;!-- Button trigger modal --&gt;
&lt;ANY data-toggle="modal" data-target="TARGET"&gt;...&lt;/ANY&gt;

&lt;div class="modal fade" id="SELECTOR" tabindex="-1"&gt;
  &lt;div class="modal-dialog"&gt;
   &lt;div class="modal-content"&gt;
    &lt;div class="modal-body"&gt; ... &lt;/div&gt;
     &lt;div class="modal-footer"&gt;           &lt;!-- ↓ --&gt;  &lt;!--      ↓      --&gt;
      &lt;ANY data-toggle="modal" data-target="TARGET-2" data-dismiss="modal"&gt;...&lt;/ANY&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
</div> <!-- end .container -->

<hr />
<footer class="text-center"><a href="https://twitter.com/_elmahdim">@_elmahdim</a></footer>
<br />
<br />

【讨论】：

【解决方案27】：

我可能有点晚了，但我想我已经找到了可行的解决方案。

必填 -

jQuery

所有模式带有关闭/关闭按钮，属性设置如下 -

<button type="button" class="btn close_modal" data-toggle="modal" data-target="#Modal">Close</button>

请查看添加到按钮类的类close_modal

现在要关闭所有现有的模式，我们将调用

$(".close_modal").trigger("click");

所以，无论你想在哪里打开一个模态

只需添加上面的代码，所有打开的模式都会关闭。

然后添加您的正常代码以打开所需的模式

$("#DesiredModal").modal();

【讨论】：

【解决方案28】：

隐藏模式对话框。

方法一：使用Bootstrap。

$('.close').click(); 
$("#MyModal .close").click();
$('#myModalAlert').modal('hide');

方法二：使用stopPropagation()。

$("a.close").on("click", function(e) {
  $("#modal").modal("hide");
  e.stopPropagation();
});

方法3：显示方法调用后。

$('#myModal').on('shown', function () {
  $('#myModal').modal('hide');
})

方法4：使用CSS。

this.display='block'; //set block CSS
this.display='none'; //set none CSS after close dialog

【讨论】：

【解决方案29】：

只需复制并粘贴此代码，您就可以尝试两种模式。关闭第一个模态后，第二个模态打开：

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Modal Heading</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>



<!-- The Modal 2 -->
<div class="modal" id="myModal2">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Second modal</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Modal body..
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>

        </div>
    </div>
</div>




<script>
    $('#myModal').on('hidden.bs.modal', function () {
        $('#myModal2').modal('show')
    })
</script>

干杯！

【讨论】：