当前位置：theitroad>jQuery Bootstrap：在 Modal 中打开另一个 Modal

jQuery Bootstrap：在 Modal 中打开另一个 Modal

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/19528173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-27 00:10:16 　来源:igfitidea点击:

Bootstrap: Open Another Modal in Modal

javascriptjquerytwitter-bootstrapmodal-dialogtwitter-bootstrap-3

提问by AlexioVay

So, I'm using this code to open another modal window in a current opened modal window:

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

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

What happens is, that for like 500ms the scrollbar will duplicate. I guess because the current modal is still fading out. However it looks very un-smooth and stuttering.

发生的情况是，滚动条将重复大约 500 毫秒。我猜是因为当前的模态仍在淡出。然而，它看起来非常不流畅和口吃。

I would appreciate any suggestions to solve this issue.

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

Also, is the way building this in an onclick-event unprofessional?

另外，在点击事件中构建它的方式不专业吗？

I'm working with the bootstrap version 3.0.

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

Edit: I guess it's neccesary to reduce the time of fading out a modal. How is this possible?

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

回答by jayeshkv

data-dismissmakes the current modal window force close

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

data-toggleopens up a new modal with the hrefcontent inside it

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

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

or

或者

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

do let us know if it works.

请让我们知道它是否有效。

回答by H Dog

My solution does not close the lower modal, but truly stacks on top of it. It preserves scrolling behavior correctly. Tested in Bootstrap 3. For modals to stack as expected, you need to have them ordered in your Html markup from lowest to highest.

我的解决方案不会关闭较低的模态，而是真正堆叠在它之上。它正确地保留了滚动行为。在 Bootstrap 3 中测试。要使模态按预期堆叠，您需要在 Html 标记中将它们从最低到最高排序。

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

UPDATE: When you have stacked modals, all the backdrops appear below the lowermost modal. You can fix that by adding the following CSS:

更新：当您堆叠模态时，所有背景都出现在最下方的模态下方。您可以通过添加以下 CSS 来解决此问题：

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

This will give the appearance of a modal backdrop below the topmost visible modal. That way it grays out your lower modals underneath.

这将在最顶部可见模态下方显示模态背景。这样它就会使下方的较低模态变灰。

回答by suhailvs

To open another modal window in a current opened modal window,
you can use bootstrap-modal

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

bootstrap-modal DEMO

引导模式演示

回答by Elon Gomes Vieira

try this

尝试这个

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

回答by Giraldi

You can actually detect when the old modal closes by calling the hidden.bs.modalevent:

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

    });

For more info: http://getbootstrap.com/javascript/#modals-events

欲了解更多信息：http: //getbootstrap.com/javascript/#modals-events

回答by Zim

Update for 2018 -- Using Bootstrap 4

2018 年更新——使用 Bootstrap 4

I found most of the answers seem to have a lot of unnecessary jQuery. To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show.bs.modal. You may also want some CSS to handle the backdrop overlays. Here are the 3 open modal from another scenarios...

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

Open modal from another modal (keep 1st modal open)

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

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

A potential issue in this case is that the backdrop from the 2nd modal hides the 1st modal. To prevent this, make the 2nd modal data-backdrop="static", and add some CSS to fix the z-indexes of the backdrops...

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

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

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

Open modal from another modal (close 1st modal)

从另一个模态打开模态（关闭第一个模态）

This is similar to the above scenario, but since we are closing the 1st modal when the 2nd is opened, there is no need for the backdrop CSS fix. A simple function that handles the 2nd modals show.bs.modalevent closes the 1st modal.

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

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

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

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

Open modal insideanother modal

在另一个模态内打开模态

The last multiple modals scenario is opening the 2nd modal inside the 1st modal. In this case the markup for the 2nd is placed inside the 1st. No extra CSS or jQuery is needed.

最后一个多模态场景是在第一个模态内打开第二个模态。在这种情况下，第二个的标记放置在第一个内。不需要额外的 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

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

回答by RedDevil2015

Modals in Modal:

模态中的模态：

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

回答by Ren

Working on a project that has a lot of modals calling other modals and a few HTML guys that might not know to initiate it everytime for each button. Came to a similar conclusion as @gmaggio, begrudgingly after going the long way around first.

在一个项目中工作，该项目有很多模态调用其他模态和一些可能不知道每次为每个按钮启动它的 HTML 人员。得出了与@gmaggio 类似的结论，在先走了很长一段路之后不情愿地。

EDIT: Now supports modals called via javascript.

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

EDIT: Opening a scrolling modal from another modal now works.

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

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

Just place the modal calling button in as normal, and if it is picked up to be inside a modal, it will close the current one first before opening the one specified in data-target. Note that relatedTargetis provided by Bootstrap.

只需像往常一样放置模态调用按钮，如果它被拾取到模态内，它将先关闭当前的，然后再打开 data-target 中指定的那个。请注意，这relatedTarget是由 Bootstrap 提供的。

I also added the following to smooth out the fading a bit: I am sure more can be done though.

我还添加了以下内容以稍微消除褪色：不过，我相信可以做更多的事情。

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

回答by CrandellWS

Twitter docs says custom code is required...

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

This works with no extra JavaScript, though, custom CSS would be highly recommended...

这不需要额外的 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 -->

回答by smartbloke

For bootstrap 4, to expand on @helloroy's answer I used the following;-

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

The advantage of the above is that it won't have any effect when there is only one modal, it only kicks in for multiples. Secondly, it delegates the handling to the body to ensure future modals which are not currently generated are still catered for.

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

Update

更新

Moving to a js/css combined solution improves the look - the fade animation continues to work on the backdrop;-

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

combined with the following css;-

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

This will handle modals nested up to 4 deep which is more than I need.

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

相关推荐

jQuery 清除后退按钮上的表格？

jQuery 清除后退按钮上的表格？

jQuery 未定义 twitter bootstrap

jQuery 未定义 twitter bootstrap

将 csv 文件加载到 jQuery 中？

将 csv 文件加载到 jQuery 中？

如何检查引导模式是否打开，以便我可以使用 jquery 验证

如何检查引导模式是否打开，以便我可以使用 jquery 验证

相关推荐
最近更新
标签