Откройте модал из другого модала и закройте первый (запускающий) модал

Я использую Bootstrap Modal Window plugin, его работа прекрасна, но я хотел бы открыть другое окно модели, когда я нажимаю next и закрываю первый. как я могу это сделать?

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

далее.файл 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>
12
bootstrap-modal jquery modal-window twitter-bootstrap

5 ответов

обновить ответ найдете ниже: https://stackoverflow.com/a/44391959/1004312

вы открываете модальный из другого модального и закрываете первый. Если вы используете Bootstrap 3, Вы можете сделать следующее:

демо:http://jsbin.com/venek/1/edit

в первом модальном поставить ссылку на следующий модальный (#modal-1 & #modal-2 являются идентификаторами примера)

  <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

22

все в порядке, отойдите назад; у меня есть это.

этот метод отрицает проблемы с заполнением и прокруткой, присутствующие в других методах (см. Внизу), и является [IMO] самым чистым способом достижения требуемой функциональности с помощью Модалов начальной загрузки.

Inline

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

Совет: Если вам не нужно делать это более одного раза, Я рекомендую использовать Inline версия.

вопросы, присутствующие в других ответах

это создает проблему, когда ваш модальный имеет больше высоты, чем ваш экран. As data-dismiss= "modal" удаляет класс modal-open из тела метка. Итак, когда вы прокручиваете, modal не прокручивается, но исчезает фон начинает двигаться. что плохо. // Дипак Шахова

может подтвердите проблему, сообщенную @Deepak. Кроме того, страница будет инкремент и принудительное "заполнение справа" на +17px каждый раз, когда вы открываете модальный изнутри другой (модальный, возможно, должен быть выше страницы чтобы это произошло). Это справедливо почти для всех методов на этом страница. См. мой ответ для метода, который позволяет избежать этих проблем. // Мэтью Хадсон

10
<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);
});
3

@Deepak Yadav проблема: data-dismiss= "modal" удаляет класс modal-open из тега body возможно, есть одно решение с JS:

добавить класс в next-предыдущие ссылки

     <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;}
1

когда u закрывает второе всплывающее окно bootstrap, открывается только второе закрытие и первое

для этого мы можем использовать вторую всплывающую кнопку закрытия на первом модальном id

пример

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