引导程序：在模式中打开另一个模式

95

因此，我正在使用以下代码在当前打开的模式窗口中打开另一个模式窗口：

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

发生的情况是，滚动条将在500ms左右重复。我猜是因为当前的模态仍在逐渐消失。但是，它看起来非常不光滑且结结巴巴。

对于解决此问题的任何建议，我将不胜感激。

另外，在onclick事件中构建此内容的方法是否不专业？

我正在使用引导程序版本3.0。

编辑：我认为有必要减少淡出模态的时间。这怎么可能？

javascript  jquery  twitter-bootstrap  modal-dialog  twitter-bootstrap-3 
— 阿列克西奥·韦（AlexioVay）
source
3
一个工作示例可以在bootply.com/lvKQA2AM28
— CrandellWS

Answers:

86

data-dismiss 使当前模态窗口力关闭

data-toggle打开一个新的模式，其中包含href内容

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

要么

<a data-dismiss="modal" onclick="call the new div here">Click</a>

请告知我们是否可行。

— jayeshkv
source
谢谢，它可以工作，并且避免使用“ onclick”。但是动画效果仍然会使滚动条加倍一秒钟。
— AlexioVay 2013年
@ user2829128多数民众赞成在data-dismiss做什么。它关闭当前窗口并打开一个新窗口。您可以在bootply或中发布代码jsfiddle吗？
— jayeshkv
14
如果高度过长，则滚动不适用于第二个模式。
— Giraldi
与Bootstrap v4相同。当我单击第一个蒙大拿州的按钮时，它打开了另一个模式，第二个模式显示为滚动体。问题在.modal-open类中。单击并不再添加时，它将删除。
— fdrv
7
.modal { overflow-y: auto }解决了BS4滚动问题。
— Riki137
84

我的解决方案没有关闭较低的模态，而是真正地叠加在它上面。它可以正确保留滚动行为。在Bootstrap 3中进行了测试。为使模式能够按预期堆叠，您需要在HTML标记中按从最低到最高的顺序对它们进行排序。

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});
展开摘要

更新：堆叠模态后，所有背景都显示在最低模态下方。您可以通过添加以下CSS来解决此问题：

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

这将在最上方的可见模态下方显示模态背景的外观。这样，它会使下面的较低模态变灰。

— H狗
source
2
页面标记中后期的项目自然具有较高的z索引，并将堆叠在标记中较早出现的项目之上。除非您设置了明确的z-index。
— H Dog
1
@H狗：正是我所需要的:)完美。谢谢！
— Tobias Koller
2
真正的传奇！每当有人建议为此使用插件时，我都会翻转……只是想为一个简单的问题提供一个简单的解决方案，然后您就可以开始了……干杯！
— Fr0zenFyr
2
非常感谢您的帮助。当我同时使用两个模态时，您的解决方案解决了我的问题！
— 莱文
3
Javascript适用于Bootstrap 4，但是CSS却没有。相反，我隐藏了背景，然后在{content：“”;之后添加.modal：after。显示：块；背景：rgba（0,0,0，.5）; 位置：固定 最高：0; 底部：0 宽度：100％; z索引：-1；}
— Jason G.19年
18

试试这个

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>



<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal"      data-target="#test2">Open Modal 2</button>
      	
      </div>      
    </div>
  </div>
</div>

<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	
        content
      	
      </div>      
    </div>
  </div>
</div>
  

</body>
</html>
展开摘要

— 伊隆·戈麦斯·维埃拉
source
1
失败的我.. =（模态的作品，但如果第一个模式是长的，对于第一次出现模式滚动，当你打开第二个模式，并关闭它的第一模式滚动不工作。
— 文森特Dapiton
非常感谢您，这是非常有用的:)
— DanielMuñoz19年
17

您实际上可以通过调用hidden.bs.modal事件来检测旧模式何时关闭：

    $('.yourButton').click(function(e){
        e.preventDefault();

        $('#yourFirstModal')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#yourSecondModal').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });

有关更多信息：http : //getbootstrap.com/javascript/#modals-events

— 吉拉尔迪
source
16

2018年更新-使用Bootstrap 4

我发现大多数答案似乎都有很多不必要的jQuery。要从另一个模式中打开一个模式，只需使用Bootstrap提供的事件即可show.bs.modal。您可能还需要一些CSS处理背景叠加层。这是来自其他场景的3种开放模式...

从另一个模态打开模态（保持第一个模态打开）

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Modal title</h4>    
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ...
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
          </div>
        </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">2nd Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ..
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
        </div>
</div>

在这种情况下，一个潜在的问题是第二个模态的背景隐藏了第一个模态。为了防止这种情况，请使2nd为modal data-backdrop="static"，并添加一些CSS来修复背景的z-indexs ...

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://www.codeply.com/go/NiFzSCukVl

来自另一个模态的开放模态（接近第一个模态）

这与上述情况类似，但是由于我们在打开第二个模态时关闭了第一个模态，因此不需要背景CSS修复。一个处理第二个模态show.bs.modal事件的简单函数将关闭第一个模态。

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

https://www.codeply.com/go/ejaUJ4YANz

另一个模态内的开放模态

最后一个多模态方案是在第一个模态内打开第二个模态。在这种情况下，第二个的标记位于第一个的内部。不需要额外的CSS或jQuery。

<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                ...
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">2nd Modal title</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/iSbjqubiyn

— 齐姆
source
它在Bootstrap 4中不起作用。当您关闭第二个模式时，第一个模式将不再滚动。
— 贾斯汀
@Justin-我看不到有具体的情况可以证明这一点，并且由于滚动超出了原始问题的范围。我建议您寻找或询问有关滚动问题的其他问题。
— Zim
nth-of-type对我不起作用，因为它不关注类。我使用它： .modal-backdrop.show + .modal.show { z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show { z-index: 1051 !important; }
— webhead
14

模态中的模态：

$('.modal-child').on('show.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 0);
});
 
$('.modal-child').on('hidden.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 1);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>


<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
             
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
                <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
            </div>

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

<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 1</h4>
            </div>
            <div class="modal-body">
                <p>Two modal body…1</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

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

<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 2</h4>
            </div>
            <div class="modal-body">
                <p>Modal body…2</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>
展开摘要

— 红魔2015
source
失败的我.. =（模态的作品，但如果第一个模式是长的，对于第一次出现模式滚动，当你打开第二个模式，并关闭它的第一模式滚动不工作。
— 文森特Dapiton
上面的示例在第一个模态不出现在第一个模态的位置上生成了模态（第一个模态不再可见）。
— JackTheKnife
效果很好。
— Jorge B.19年
如何在语义UI中使用您的解决方案？
— vahidsamimi
9

在一个具有许多调用其他模式的模式的项目以及一些可能不知道每次为每个按钮启动它的HTML专家中工作。在首先走了很长一段路之后，令人作呕地得出了与@gmaggio相似的结论。

编辑：现在支持通过javascript调用的模式。

编辑：现在可以从另一个模式打开滚动模式。

$(document).on('show.bs.modal', function (event) {
    if (!event.relatedTarget) {
        $('.modal').not(event.target).modal('hide');
    };
    if ($(event.relatedTarget).parents('.modal').length > 0) {
        $(event.relatedTarget).parents('.modal').modal('hide');
    };
});

$(document).on('shown.bs.modal', function (event) {
    if ($('body').hasClass('modal-open') == false) {
        $('body').addClass('modal-open');
    };
});

只需正常放置模式调用按钮即可，如果将其调到模式内部，则它将首先打开当前模式的按钮，然后再打开data-target中指定的按钮。请注意，relatedTarget由Bootstrap提供。

我还添加了以下内容，以使褪色变得更平滑：虽然我可以做更多。

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}
— 仁
source
不是100％的问题，但是shown.bs.modal挂钩很方便。在BS v.3.3.5中，body.modal-open类的管理似乎有问题，在关闭一个模态并打开另一个模态后，缺少它，因此背景滚动而不是（第二个）模态。您的钩子可以解决该问题。
— Manuel Arwed Schmidt
7

Twitter文档说需要自定义代码...

这不需要额外的JavaScript，但是强烈建议使用自定义CSS。

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
      Launch demo modal
    </button> 
            <!-- Modal -->
            <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
    
              <div class="modal-dialog">
          
                <div class="modal-content  bg-info">
                  <div class="modal-header btn-info">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="modalOneLabel">modalOne</h4>
                  </div>
                  <div id="thismodalOne" class="modal-body bg-info">
                
                
              <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
      Launch demo modal
    </button>
             
                    <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
                <h3>EXAMPLE</h3>
            </div>
                  </div>
                  <div class="modal-footer btn-info" id="woModalFoot">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
    <!-- End Form Modals -->
展开摘要

— CrandellWS
source
1
这是另一个示例，其中第二个模式已正确格式化为bootply.com/qRsvPSrcO5
— Zim
1
@Skelly像在CSS中一样更改z-index是个好主意...z-index: 1080 !important;
— CrandellWS 2014年
4
如果您打开第二个模态并在外部单击，则会出现问题。（Chrome浏览器，最新发布）
— Martin Braun
也许我错了，但我相信文档会说不要在模式中放入模式，这并不奇怪
— CrandellWS
7

对于bootstrap 4，为了扩展@helloroy的答案，我使用了以下内容;-

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
    if ( modal_lv > 0 )
    {
        $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
        $(e.target).css('zIndex',1051+modal_lv) ;
    }
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

上面的优点是，当只有一个模态时，它不会有任何作用，只会出现多个。其次，它将处理委托给车身，以确保仍能满足当前未生成的未来模态。

更新资料

转向js / css组合解决方案可改善外观-淡入淡出动画在背景中继续起作用；-

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
    if ( modal_lv > 0 )
        $(e.target).css('zIndex',1051+modal_lv) ;
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

结合以下CSS；-

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}

这将处理嵌套最多4个深度的模态，这超出了我的需要。

— 聪明的家伙
source
它在Bootstrap 4中不起作用。当您关闭第二个模式时，第一个模式将不再滚动。
— 贾斯汀
4

试试这个：

// Hide the login modal
$('#login').modal('hide');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

这个简单的技巧对我有用。

— 基督教
source
4

对于使用bootstrap 4的人 https://jsfiddle.net/helloroy/tmm9juoh/

var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e) {
    $('.modal-backdrop:last').css('zIndex',1051+modal_lv);
    $(e.currentTarget).css('zIndex',1052+modal_lv);
    modal_lv++
});

$('.modal').on('hidden.bs.modal', function (e) {
    modal_lv--
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">
  Launch demo modal a
</button>

<div class="modal fade" id="modal-a" 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">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
  Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-b" 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">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
  Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<div class="modal" id="modal-c" 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">
<p class="my-3">That's all.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
展开摘要

— 你好
source
太好了，剩下的唯一问题是防止在最顶部的模式关闭时重新显示滚动条
— HyperActive
如何在语义UI中使用您的解决方案？
— vahidsamimi
2

我的可滚动模式也有一些麻烦，所以我做了这样的事情：

  $('.modal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
    // BS adds some padding-right to acomodate the scrollbar at right
    $('body').removeAttr('style');
  })

  $(".modal [data-toggle='modal']").click(function(){
    $(this).closest(".modal").modal('hide');
  });

它可以用于出现的任何一种模式。注意，第一个关闭，因此第二个可以出现。Bootstrap结构没有变化。

— teefars
source
2

我一起走了一条不同的路线，我决定对它们“去巢”。也许有人会觉得这很方便...

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.
— 迪伦·海斯（Dylan Hayes）
source
非常感谢您
2

我的代码使用数据消除效果很好。

<li class="step1">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
        <p class="text-label">Step 1</p>
        <p class="text-text">Plan your Regime</p>
    </a>

</li>
<li class="step2">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
        <p class="text-label">Step 2</p>
        <p class="text-text">Plan your menu</p>
    </a>
</li>
<li class="step3 active">
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
        <p class="text-label">Step 3</p>
        <p class="text-text">This Step is Undone.</p>
    </a>
</li>
— 用户名
source
1

关闭第一个Bootstrap模态，然后动态打开新的模态。

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);
— 阿比舍克
source
1

为什么不只更改模态主体的内容？

    window.switchContent = function(myFile){
        $('.modal-body').load(myFile);
    };

在模式中，只需放置一个链接或一个按钮

    <a href="Javascript: switchContent('myFile.html'); return false;">
     click here to load another file</a>

如果您只想在两种模式之间切换：

    window.switchModal = function(){
        $('#myModal-1').modal('hide');
        setTimeout(function(){ $('#myModal-2').modal(); }, 500);
        // the setTimeout avoid all problems with scrollbars
    };

在模式中，只需放置一个链接或一个按钮

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>
— 卡洛
source
这更像是与UX相关的答案，因为我需要它来显示有关模式＃1的错误消息。因此模式2出现了错误消息。但是自从我问这个问题以来已经很久了，现在我正在以不同的方式来做这种事情。
— -AlexioVay
0

试试这个：

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
  if($(".modal:visible").length > 0) {
      //Slap the class on it (wait a moment for things to settle)
      setTimeout(function() {
          $('body').addClass('modal-open');
      },100)
  }
});
— 拉克什·瓦德纳尔
source
0

H Dog给的答案很好，但是这种方法实际上在Internet Explorer 11中给了我一些模式闪烁。Bootstrap将首先隐藏模式，删除“ modal-open”类，然后（使用H Dogs解决方案）添加再次进行“模态开放”课程。我怀疑这是某种原因导致的闪烁，这可能是由于一些缓慢的HTML / CSS渲染所致。

另一个解决方案是防止引导程序首先从body元素中删除“ modal-open”类。使用Bootstrap 3.3.7，对内部hideModal函数的此覆盖对我来说非常理想。

$.fn.modal.Constructor.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
        if ($(".modal:visible").length === 0) {
            that.$body.removeClass('modal-open')
        }
        that.resetAdjustments()
        that.resetScrollbar()
        that.$element.trigger('hidden.bs.modal')
    })
}

在此替代中，仅当屏幕上没有可见的模态时才删除“ modal-open”类。而且可以防止一帧删除类并将其添加到body元素。

加载引导程序后，只需包括覆盖。

— 亚当
source
-4 

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

— 亚历克斯·史
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.