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

Posted 2023-05-08

【中文标题】从另一个模态打开一个模态并关闭第一个（启动）模态

【英文标题】：Open a Modal from another modal and close the first (launching) modal

【发布时间】：2014-10-08 18:04:41

【问题描述】：

我正在使用 Bootstrap 模态窗口插件，它工作正常，但我想在单击下一步并关闭第一个模型窗口时打开另一个模型窗口。我该怎么做？

$('[data-toggle="modal"]').click(function(e) 
    
        e.preventDefault();
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0)
        
            $(url).modal('open');
         
        else 
        
            $.get(url, function(data) 
            
                $(data).modal();
            ).success(function()  $('input:text:visible:first').focus(); );
        
    );

<a href="next.html" data-toggle="modal">Add Record</a>

next.html 文件代码

<div class="modal fade" id="compose-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">First Window</h4>
            </div>
            <form action="#" method="post">

                <div class="modal-footer clearfix">
                    <button type="button" data-dismiss="modal">Discard</button>

                    <button type="submit">Submit</button>
                     <a href="next2.html" data-toggle="modal" >Next</a>
                </div>
            </form>
        </div>
    </div>
</div>

【参考方案1】：

您正在从另一个模态打开一个模态并关闭第一个。如果您使用的是 Bootstrap 3，则可以执行以下操作：

演示：http://jsbin.com/venek/1/edit

在第一个模态中放置下一个模态的链接（#modal-1 & #modal-2 是示例 ID）

  <a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>

在第二个模态中把链接放到第一个：

  <a href="#modal-1" data-toggle="modal" data-dismiss="modal">Previous</a>

演示：http://jsbin.com/venek/1/edit

【讨论】：

感谢@BootstrapThemer 帮助我，它运行良好，但不能在外部文件上运行

我没有找到关于在另一个模态中打开远程模态的说明，但您可能可以在这里找到对您有帮助的东西：***.com/questions/18378720/…。

当你的模态框比你的屏幕高时，它会产生一个问题。由于data-dismiss="modal" 从 body 标记中删除了 modal-open 类。因此，当您滚动时，模态不会滚动，但褪色的背景开始移动。这很糟糕。

可以确认@Deepak 报告的问题。此外，每次您从另一个内部打开一个模态时，页面将增加并强制“padding-right”+17px（模态可能需要高于页面才能发生这种情况）。这适用于此页面上的几乎所有方法。请参阅我的回答，了解避免这些问题的方法。

我现在发布了解决这些问题的方法 - 请参阅#answer-44391959 :)

【参考方案2】：

好的，大家退后；我有这个。

此方法消除了其他方法中存在的填充和滚动问题（见底部），并且是 [IMO] 使用 Bootstrap 模态实现所需功能的最简洁方法。

内联

<a onclick="$('.modal-to-close').one('hidden.bs.modal', function()  $('.modal-to-open').modal('show'); ).modal('hide');">Open Modal</a>

全脂：

<script>
    $(function () 
        $('.selector').click(function() 
            $('.modal-to-close').one('hidden.bs.modal', function() 
                $('.modal-to-open').modal('show'); 
            ).modal('hide');
        );
    );
</script>

<a class="selector">Open Modal</a>

野兽模式：

<script>
    $(function () 
        $('[data-bm-close][data-bm-open]').on('click', function () 
            var $this = $(this);
            $($this.data('bm-close')).one('hidden.bs.modal', function () 
                $($this.data('bm-open')).modal('show');
            ).modal('hide');
        );
    );
</script>

<a data-bm-close=".modal-to-close" data-bm-open=".modal-to-open">Open Modal</a>

提示：除非您需要多次执行此操作，否则我建议使用 内联 版本。

---

其他答案中存在的问题

It creates a problem, when your modal has more height than your screen. As data-dismiss="modal" removes modal-open class from body tag. so, when you scroll, modal doesn't scrolls, but the faded background starts moving. which is bad. // 迪帕克·亚达夫

Can confirm the issue reported by @Deepak. Furthermore the page will increment and enforce "padding-right" by +17px each time you open a modal from inside another (modal might need to be taller than the page for this to happen). This holds true for almost all methods on this page. See my answer for a method that avoids these issues. // 马修·哈德森

【讨论】：

在我找到的所有解决方案中，这是唯一一个完美解决零问题的解决方案，谢谢！

正是我想要的。其他绑定隐藏事件的方法会导致所有隐藏动作执行回调。

最佳答案，在使用淡入淡出时也适用于 BS4 和 BS5。

【参考方案3】：

<a data-toggle="modal" data-target="#open1" data-dismiss="modal">OPEN 1</a>
<a data-toggle="modal" data-target="#open2" data-dismiss="modal">OPEN 2</a>

$('.modal).on('show.bs.modal',function()
setTimeout(function()
$('body').addClass('modal-open');
,800);
);

【讨论】：

这确实允许滚动，但不是立即的并且会导致页面闪烁。请参阅#answer-44391959 了解解决方法:)

这应该是正确答案。

【参考方案4】：

@Deepak 亚达夫 问题：data-dismiss="modal" 从 body 标签中删除 modal-open 类 也许 JS 有一种解决方案：

将类添加到下一个上一个链接

     <a class="nextStep" href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>
     <a class="previousStep" href="#modal-1" data-toggle="modal" data-dismiss="modal">previous</a>

JS：

var $body = $('body')
  $("a.nextStep").click(function()
   $body.addClass('modal1-on')
  );
  $("a.previousStep").click(function()
   $body.addClass('modal2-on')
  );

  $('#modal-1').on('hidden.bs.modal', function () 
  $body.removeClass('modal2-on')
  );
  $('#modal-2').on('hidden.bs.modal', function () 
  $body.removeClass('modal1-on')
  );

然后是css：

    body.modal1-on, body.modal2-on overflow: hidden;

【参考方案5】：

当你关闭引导程序第二个弹出窗口时，只有第二个关闭并且第一个是打开的

为此，我们可以在引导第一个模态 ID 上使用第二个弹出关闭按钮

例子

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">Close</button>

【讨论】：

很遗憾，此方法存在前面提到的滚动和填充问题，请参阅#answer-44391959 了解解决方法:)

【参考方案6】：

这是一个让您以一般方式将两个模态链接在一起的方法。第一个模态有一个启动第二个模态的按钮。当第二个模态关闭时，第一个模态被重新打开。

// Prevent modal on top of modal while maintaining dismissibility. 
// If a sub-modal is dismissed the original modal is reopened.
$('.modal [data-toggle="modal"]').on('click', function() 
  var curModal = $(this).closest('.modal');
  var nextModal = $($(this).attr('data-target'));

  if (curModal != nextModal) 
    curModal.modal('hide');
    nextModal.on('hide.bs.modal', function() 
      curModal.modal('show');
    );
  
);

注意：仅当您最多有 2 个链接模式时才应使用此选项。 第二个模式上的按钮打开第三个会导致意外行为，因为它会关闭第二个模式，打开第三个，并重新打开第一个。