Bootstrap:在Modal中打开另一个模态

Question

Bootstrap:在Modal中打开另一个模态

Ale*_*Vay 81 javascript jquery modal-dialog twitter-bootstrap twitter-bootstrap-3

所以,我正在使用此代码在当前打开的模态窗口中打开另一个模态窗口:

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

Run Code Online (Sandbox Code Playgroud)

会发生什么,如同500ms一样,滚动条会复制.我猜是因为目前的模态还在逐渐淡出.然而,它看起来非常不光滑和口吃.

我很感激任何解决这个问题的建议.

另外,在onclick-event不专业的情况下构建它的方法是什么？

我正在使用bootstrap 3.0版.

编辑:我想减少模态淡出的时间是必要的.这怎么可能？

Answer 1

jay*_*hkv 77

data-dismiss 使当前的模态窗口力接近

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

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

Run Code Online (Sandbox Code Playgroud)

要么

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

Run Code Online (Sandbox Code Playgroud)

如果有效,请告诉我们.

您可能还想查看模态文档

如果高度很长,则滚动对第二个模态不起作用. (12认同)
.modal {overflow-y：auto}解决了BS4滚动问题。 (3认同)

Answer 2

H D*_*Dog 74

我的解决方案并没有关闭较低的模态,而是真正堆叠在它上面.它正确地保留了滚动行为.在Bootstrap中测试3.对于要按预期堆栈的模态,您需要在Html标记中从最低到最高排序.

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

Run Code Online (Sandbox Code Playgroud)

更新:当您有叠加模态时,所有背景都显示在最下面的模态下方.您可以通过添加以下CSS来解决此问题:

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

Run Code Online (Sandbox Code Playgroud)

这将在最顶部的可见模态下方提供模态背景的外观.这样它会使你下方的较低模态变灰.

Javascript 适用于 Bootstrap 4，但是 CSS 没有。相反，我隐藏了背景，然后添加了 .modal:after { content: ""; 显示：块；背景：rgba(0,0,0, .5); 位置：固定；顶部：0；底部：0；宽度：100%；z-索引：-1；} (4认同)
页面标记中的后续项目具有自然更高的z-index,并且将堆叠在标记中较早出现的项目之上.除非你设置一个明确的z-index. (2认同)
真正的传奇!! 每当有人建议使用插件时,我就会翻转...只是想为一个简单的问题找到一个简单的解决方案,然后你去...干杯! (2认同)
非常感谢,感谢您的帮助.当我同时使用两个模态时,您的解决方案已经解决了我的问题!!!!! (2认同)

Answer 3

suh*_*lvs 26

要在当前打开的模态窗口中打开另一个模态窗口,
可以使用bootstrap-modal

bootstrap-modal DEMO

Answer 4

小智 17

试试这个

<!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>

Run Code Online (Sandbox Code Playgroud)

对我来说失败.. =( 模式有效，但如果第一个模式很长，则会出现第一个模式的滚动，当您打开第二个模式并关闭它时，第一个模式滚动将无法工作。 (2认同)

Answer 5

Gir*_*ldi 16

您可以通过调用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
            });

    });

Run Code Online (Sandbox Code Playgroud)

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

Answer 6

小智 11

莫代尔的模态:

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 7

Ren*_*dom 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');
    };
});

Run Code Online (Sandbox Code Playgroud)

只需将模态调用按钮置于正常状态,如果它被拾取到模态内,它将在打开数据目标中指定的那个之前先关闭当前的模态.请注意,这relatedTarget是由Bootstrap提供的.

我还添加了以下内容以消除淡化:我确信可以做更多的事情.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}

Run Code Online (Sandbox Code Playgroud)

Answer 8

Zim*_*Zim 9

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>

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 9

Cra*_*lWS 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 -->

Run Code Online (Sandbox Code Playgroud)

如果您打开第二个模态并单击外部它将被窃听.(Chrome,最新) (4认同)

Answer 10

sma*_*oke 7

对于引导程序 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-- ;
});

Run Code Online (Sandbox Code Playgroud)

上面的优点是当只有一个模态时它不会有任何影响，它只对倍数起作用。其次，它将处理委托给主体，以确保仍能满足当前未生成的未来模态。

更新

转移到 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-- ;
});

Run Code Online (Sandbox Code Playgroud)

结合以下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 ;
}

Run Code Online (Sandbox Code Playgroud)

这将处理嵌套多达 4 层的模态，这超出了我的需要。

Answer 11

小智 5

尝试这个：

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 12

小智 5

对于使用 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--
});

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，2 月前
查看次数：	283636 次
最近记录：	6 年，2 月前