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

Я использую модуль 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>

Ответ 1

Ниже приведен более подробный ответ: fooobar.com/questions/615257/...

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

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

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

Ответ 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>

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.

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

Это создает проблему, когда ваш модальный имеет больше высоты, чем ваш экран. Поскольку data-reject = "modal" удаляет модально-открытый класс из тела тег. поэтому, когда вы прокручиваете, модальные не свитки, а выцветшие фон начинает двигаться. что плохо.//Deepak Yadav

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

Ответ 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);
});

Ответ 4

@Deepak Yadav проблема: data-reject = "modal" удаляет модально-открытый класс из тега body возможно, есть одно решение с 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

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

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

Пример

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