19

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

$('[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>
4

6 回答 6

26

您正在从另一个模态打开一个模态并关闭第一个模态。如果您使用的是 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

于 2014-08-15T05:17:15.530 回答
16

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

此方法消除了其他方法中存在的填充和滚动问题（见底部），并且是 [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>

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

其他答案中存在的问题

当您的模式的高度比屏幕高时，它会产生一个问题。由于 data-dismiss="modal" 从 body 标签中删除了 modal-open 类。因此，当您滚动时，模态不会滚动，但褪色的背景开始移动。这很糟糕。// 迪帕克·亚达夫

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

于 2017-06-06T13:53:14.370 回答
4 
<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);
});
于 2016-11-20T19:00:20.160 回答
1

@Deepak Yadav 问题： 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;}
于 2016-07-26T16:04:06.363 回答
0

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

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

例子

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">Close</button>
于 2017-05-11T09:19:25.893 回答
0

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

// 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 个链接模式时才应使用此选项。第二个模式上的按钮打开第三个会导致意外行为，因为它会关闭第二个模式，打开第三个，然后重新打开第一个。

于 2020-05-11T23:26:45.553 回答