Question

我正在使用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>

Answer 1

更新的答案如下：https://stackoverflow.com/a/44391959/1004312

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

DEMO：http://jsbin.com/venek/1/edit

在第一个模态中将链接放到下一个模态（＃modal-1＆amp; #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>

DEMO：http://jsbin.com/venek/1/edit

Answer 2

大家好，退后一步;我有这个。

这种方法否定了填充和放大。滚动问题出现在其他方法中（见下），[IMO]是使用Bootstrap Modals实现所需功能的最简洁方法。

<强>内联

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

<强> Beastmode：

<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. // Deepak Yadav

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. // Matthew Hudson

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

@Deepak Yadav 问题：数据解雇=＆＃34;模态＆＃34;从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;}

Answer 5

当你关闭bootstrap第二个弹出窗口时，只有第二个关闭，第一个打开

为此我们可以在bootstrap第一个模态id

上使用第二个弹出关闭按钮

例如

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

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

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

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

6 个答案:

大家好，退后一步;我有这个。