Bootstrap: открыть другой модальный в модальном

95

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

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

Что происходит, так это то, что примерно на 500 мс полоса прокрутки будет дублироваться. Я думаю, потому что текущий модальный режим все еще исчезает. Однако он выглядит очень негладким и заикается.

Буду признателен за любые предложения по решению этой проблемы.

Кроме того, является ли способ создания этого на мероприятии onclick непрофессиональным?

Я работаю с версией начальной загрузки 3.0.

Изменить: я думаю, необходимо сократить время исчезновения модального окна. Как это возможно?

javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-3 AlexioVay
источник
3
Рабочий пример можно найти в bootply.com/lvKQA2AM28
CrandellWS

Ответы:

86

Мое решение не закрывает нижнее модальное окно, а действительно складывается поверх него. Он правильно сохраняет поведение прокрутки. Протестировано в Bootstrap 3. Для того, чтобы модальные окна складывались должным образом, вам необходимо упорядочить их в разметке Html от наименьшего к наибольшему.

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});
Развернуть фрагмент

ОБНОВЛЕНИЕ: когда вы сложили модальные окна, все фоны появляются под самым нижним модальным окном. Вы можете исправить это, добавив следующий CSS:

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

Это даст вид модального фона под самым верхним видимым модальным окном. Таким образом, нижние модальные окна станут серыми.

H Собака
источник
2
Элементы, расположенные позже в разметке страницы, имеют, естественно, более высокий z-индекс и будут располагаться поверх элементов, которые появились в разметке ранее. Если вы не установите явный z-index.
H Dog
1
@H Dog: именно то, что мне нужно :) работает отлично. Спасибо!
Тобиас Коллер
2
Поистине легендарный !! Я переворачивал каждый раз, когда кто-то предлагал использовать плагин только для этого ... просто хотел найти простое решение для простой проблемы, и вот оно ... Ура!
Fr0zenFyr 05
2
Большое спасибо за ВАШУ помощь. Ваше решение решило мою проблему, когда я использую два модальных окна одновременно !!!!!
Левон
3
Javascript работал с Bootstrap 4, а CSS - нет. Вместо этого я спрятал фон и добавил .modal: after {content: ""; дисплей: блок; фон: rgba (0,0,0, .5); положение: фиксированное; верх: 0; внизу: 0; ширина: 100%; z-индекс: -1; }
Джейсон Г.
86

data-dismiss закрывает текущую силу модального окна

data-toggleоткрывает новое модальное окно с hrefсодержимым внутри него

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

или

<a data-dismiss="modal" onclick="call the new div here">Click</a>

дайте нам знать, если это работает.

jayeshkv
источник
Спасибо, это работает и позволяет избежать использования "onclick". Но анимация по-прежнему удваивает полосу прокрутки на секунду.
AlexioVay
@ user2829128 вот что data-dismissделает. Он закрывает текущее окно и открывает новое. Вы можете разместить свой код в bootplyили jsfiddle?
jayeshkv
14
Прокрутка не будет работать во втором модальном окне, если высота будет большой.
Giraldi
То же самое и с bootstrap v4. Когда я нажимаю кнопку на первом мондале, открывается другой модальный, второй модальный отображается с прокруткой тела. Проблема в классе .modal-open для тела. Он удаляется, когда мы щелкаем и больше не добавляем.
fdrv
7
.modal { overflow-y: auto }решает проблему прокрутки BS4.
Riki137,
19

попробуй это

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>



<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	<button type="button" class="btn btn-info btn-lg" data-toggle="modal"      data-target="#test2">Open Modal 2</button>
      	
      </div>      
    </div>
  </div>
</div>

<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      
      <div class="modal-body">
      	
        content
      	
      </div>      
    </div>
  </div>
</div>
  

</body>
</html>
Развернуть фрагмент

Элон Гомеш Виейра
источник
1
fail for me .. = (модальное окно работает, но если 1-й модальный длинный, появляется прокрутка для 1-го модального окна, и когда вы открываете 2-й модальный и закрываете его, первый модальный скролл не работает.
Винсент Дапитон
Большое спасибо, это был большой
Даниэль Муньос
17

Фактически вы можете определить, когда закрывается старый модальный код, вызвав hidden.bs.modalсобытие:

    $('.yourButton').click(function(e){
        e.preventDefault();

        $('#yourFirstModal')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#yourSecondModal').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });

Для получения дополнительной информации: http://getbootstrap.com/javascript/#modals-events

Giraldi
источник
15

Обновление на 2018 год - использование Bootstrap 4

Я обнаружил, что в большинстве ответов много ненужного jQuery. Открыть модальное окно из другого модального окна можно просто с помощью событий, которые предоставляет Bootstrap, напримерshow.bs.modal . Вы также можете захотеть использовать CSS для обработки наложений фона. Вот 3 открытых модальных окна из других сценариев ...

Открыть модальный из другого модального окна (оставить 1-й модальный открытым)

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Modal title</h4>    
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ...
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
          </div>
        </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">2nd Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ..
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
        </div>
</div>

Потенциальная проблема в этом случае заключается в том, что фон из 2-го модального окна скрывает 1-й модальный. Чтобы предотвратить это, сделайте второй модальным data-backdrop="static"и добавьте немного CSS, чтобы исправить z-индексы фонов ...

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://www.codeply.com/go/NiFzSCukVl

Открыть модальный из другого модального окна (закрыть 1-й модальный)

Это похоже на описанный выше сценарий, но, поскольку мы закрываем 1-е модальное окно при открытии 2-го, исправление фонового CSS не требуется. Простая функция, которая обрабатывает второе модальное show.bs.modalсобытие, закрывает первое модальное окно.

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

https://www.codeply.com/go/ejaUJ4YANz

Открыть модальный внутри другого модального

Последний сценарий с несколькими модальными окнами открывает 2-е модальное окно внутри 1-го. В этом случае разметка для 2-го размещается внутри 1-го. Никаких дополнительных CSS или jQuery не требуется.

<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                ...
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">2nd Modal title</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/iSbjqubiyn

Зим
источник
Это не работает в Bootstrap 4. Когда вы закрываете второе модальное окно, первое больше не может прокручиваться.
Джастин
@Justin - я не вижу конкретного сценария, который демонстрирует это, и поскольку прокрутка выходит за рамки исходного вопроса. Я предлагаю вам найти или задать другой вопрос, связанный с проблемой прокрутки.
Зим
nth-of-type у меня не сработал, потому что он не смотрит на класс. У меня он работает с: .modal-backdrop.show + .modal.show { z-index: 1052 !important; } .modal-backdrop.show + .modal.show + .modal-backdrop.show { z-index: 1051 !important; }
webhead
14

Модальные окна в модальном:

$('.modal-child').on('show.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 0);
});
 
$('.modal-child').on('hidden.bs.modal', function () {
    var modalParent = $(this).attr('data-modal-parent');
    $(modalParent).css('opacity', 1);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>


<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
             
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>
                <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>
            </div>

        </div>
    </div>
</div>

<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 1</h4>
            </div>
            <div class="modal-body">
                <p>Two modal body…1</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>

<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header 2</h4>
            </div>
            <div class="modal-body">
                <p>Modal body…2</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>

        </div>
    </div>
</div>
Развернуть фрагмент

КрасныйДьявол2015
источник
fail for me .. = (модальное окно работает, но если 1-й модальный длинный, появляется прокрутка для 1-го модального окна, и когда вы открываете 2-й модальный и закрываете его, первый модальный скролл не работает.
Винсент Дапитон
В приведенном выше примере модальное окно появляется вместо первого, а не наверху ни в (первое больше не видно).
JackTheKnife
Очень красивый эффект.
Хорхе Б.
Как можно использовать ваше решение в Semantic UI?
vahidsamimi
9

Работа над проектом, в котором есть много модальных окон, вызывающих другие модальные окна, и несколько ребят из HTML, которые могут не знать, как запускать его каждый раз для каждой кнопки. Пришел к такому же выводу, что и @gmaggio, неохотно пройдя сначала долгий путь.

РЕДАКТИРОВАТЬ: теперь поддерживает модальные окна, вызываемые через javascript.

РЕДАКТИРОВАТЬ: открытие модального окна с прокруткой из другого модального окна теперь работает.

$(document).on('show.bs.modal', function (event) {
    if (!event.relatedTarget) {
        $('.modal').not(event.target).modal('hide');
    };
    if ($(event.relatedTarget).parents('.modal').length > 0) {
        $(event.relatedTarget).parents('.modal').modal('hide');
    };
});

$(document).on('shown.bs.modal', function (event) {
    if ($('body').hasClass('modal-open') == false) {
        $('body').addClass('modal-open');
    };
});

Просто поместите модальную кнопку вызова как обычно, и если она будет выбрана внутри модального окна, она сначала закроет текущую, а затем откроет ту, которая указана в data-target. Обратите внимание, чтоrelatedTarget это предоставляется Bootstrap.

Я также добавил следующее, чтобы немного сгладить затухание: я уверен, что можно сделать больше.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}
Ren
источник
Не на 100% ваша проблема, но показанный модальный крючок очень удобен. Управление классом body.modal-open кажется ошибочным в BS v.3.3.5, после закрытия одного модального окна и открытия другого он отсутствует, и поэтому фон прокручивается вместо (второго) модального окна. Ваш Hook может исправить такое поведение.
Мануэль Арвед Шмидт
7

Документы Twitter говорят, что требуется собственный код ...

Это работает без дополнительного JavaScript, хотя настоятельно рекомендуется использовать собственный CSS ...

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">
      Launch demo modal
    </button> 
            <!-- Modal -->
            <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">
    
              <div class="modal-dialog">
          
                <div class="modal-content  bg-info">
                  <div class="modal-header btn-info">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="modalOneLabel">modalOne</h4>
                  </div>
                  <div id="thismodalOne" class="modal-body bg-info">
                
                
              <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">
      Launch demo modal
    </button>
             
                    <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">
                <h3>EXAMPLE</h3>
            </div>
                  </div>
                  <div class="modal-footer btn-info" id="woModalFoot">
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
    <!-- End Form Modals -->
Развернуть фрагмент

CrandellWS
источник
1
Вот еще один пример с правильным форматированием 2-го модального окна bootply.com/qRsvPSrcO5
Зим
1
@Skelly, изменение z-index, как вы сделали в css, - хорошая идея ...z-index: 1080 !important;
CrandellWS
4
Если вы откроете 2-е модальное окно и нажмете за его пределами, это будет ошибка. (Chrome, последняя версия)
Мартин Браун,
может быть , я ошибаюсь , но я считаю , что документы говорят не ставить модальность в модальной , так что это своего рода не удивительно
CrandellWS
7

Для начальной загрузки 4, чтобы расширить ответ @ helloroy, я использовал следующее; -

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
    if ( modal_lv > 0 )
    {
        $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
        $(e.target).css('zIndex',1051+modal_lv) ;
    }
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

Преимущество вышеизложенного заключается в том, что он не будет иметь никакого эффекта, когда есть только один модал, он срабатывает только для кратных. Во-вторых, он делегирует обработку телу, чтобы гарантировать, что будущие модальные окна, которые в настоящее время не создаются, по-прежнему обслуживаются.

Обновить

Переход на комбинированное решение js / css улучшает внешний вид - анимация затухания продолжает работать на фоне;

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
    if ( modal_lv > 0 )
        $(e.target).css('zIndex',1051+modal_lv) ;
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

в сочетании со следующим css; -

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}

Это будет обрабатывать модальные окна, вложенные в глубину до 4, что больше, чем мне нужно.

смартблок
источник
Это не работает в Bootstrap 4. Когда вы закрываете второе модальное окно, первое больше не может прокручиваться.
Джастин
4

Попробуй это:

// Hide the login modal
$('#login').modal('hide');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

Этот простой прием у меня работает.

Христианин
источник
4

Для тех, кто использует bootstrap 4 https://jsfiddle.net/helloroy/tmm9juoh/

var modal_lv = 0;
$('.modal').on('shown.bs.modal', function (e) {
    $('.modal-backdrop:last').css('zIndex',1051+modal_lv);
    $(e.currentTarget).css('zIndex',1052+modal_lv);
    modal_lv++
});

$('.modal').on('hidden.bs.modal', function (e) {
    modal_lv--
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">
  Launch demo modal a
</button>

<div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">
  Launch another demo modal b
</button>
<p class="my-3">
Not good for fade In.
</p>
<p class="my-3">
who help to improve?
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">
  Launch another demo modal c
</button>
<p class="my-3">
But good enough for static modal
</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<p class="my-3">That's all.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Развернуть фрагмент

адский
источник
Это здорово, осталась единственная проблема - предотвратить повторное появление полосы прокрутки при закрытии самого верхнего модального
окна
2

У меня также были проблемы с прокручиваемыми модальными окнами, поэтому я сделал что-то вроде этого:

  $('.modal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
    // BS adds some padding-right to acomodate the scrollbar at right
    $('body').removeAttr('style');
  })

  $(".modal [data-toggle='modal']").click(function(){
    $(this).closest(".modal").modal('hide');
  });

Он будет служить для любого модального окна в появившемся модальном окне . Обратите внимание, что первое закрыто, поэтому может появиться второе. Никаких изменений в структуре Bootstrap.

зубы
источник
2

Я все вместе пошел по другому маршруту, я решил их "Де-Нест". Может кому пригодится это ...

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.
Дилан Хейс
источник
Большое спасибо
2

Мой код хорошо работает с использованием data-dismiss.

<li class="step1">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
        <p class="text-label">Step 1</p>
        <p class="text-text">Plan your Regime</p>
    </a>

</li>
<li class="step2">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
        <p class="text-label">Step 2</p>
        <p class="text-text">Plan your menu</p>
    </a>
</li>
<li class="step3 active">
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
        <p class="text-label">Step 3</p>
        <p class="text-text">This Step is Undone.</p>
    </a>
</li>
user3675926
источник
1

Закройте первое модальное окно Bootstrap и динамически откройте новое модальное окно.

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);
Абхишек
источник
1

Почему бы просто не изменить содержимое модального тела?

    window.switchContent = function(myFile){
        $('.modal-body').load(myFile);
    };

В модальном окне просто поместите ссылку или кнопку

    <a href="Javascript: switchContent('myFile.html'); return false;">
     click here to load another file</a>

Если вы просто хотите переключиться между двумя модальными окнами:

    window.switchModal = function(){
        $('#myModal-1').modal('hide');
        setTimeout(function(){ $('#myModal-2').modal(); }, 500);
        // the setTimeout avoid all problems with scrollbars
    };

В модальном окне просто поместите ссылку или кнопку

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>
Карло
источник
Это больше похоже на ответ, связанный с UX, потому что мне это нужно, чтобы отобразить сообщение об ошибке, касающееся Modal # 1. Итак, в Modal # 2 было сообщение об ошибке. Но с тех пор, как я задавал этот вопрос, прошло много времени, и теперь я делаю такие вещи по-другому.
AlexioVay
0

попробуй это:

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
  if($(".modal:visible").length > 0) {
      //Slap the class on it (wait a moment for things to settle)
      setTimeout(function() {
          $('body').addClass('modal-open');
      },100)
  }
});
Ракеш Ваднал
источник
0

Ответ, данный H Dog , великолепен, но этот подход фактически дал мне некоторое модальное мерцание в Internet Explorer 11. Bootstrap сначала скроет модальное окно, удалив класс 'modal-open', а затем (используя решение H Dogs) мы добавим снова модально-открытый класс. Я подозреваю, что это каким-то образом вызывает мерцание, которое я видел, возможно, из-за медленного рендеринга HTML / CSS.

Другое решение - предотвратить загрузку при удалении класса 'modal-open' из элемента body в первую очередь. При использовании Bootstrap 3.3.7 это переопределение внутренней функции hideModal у меня отлично работает.

$.fn.modal.Constructor.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
        if ($(".modal:visible").length === 0) {
            that.$body.removeClass('modal-open')
        }
        that.resetAdjustments()
        that.resetScrollbar()
        that.$element.trigger('hidden.bs.modal')
    })
}

В этом переопределении класс 'modal-open' удаляется только тогда, когда на экране нет видимых модальных окон. И вы предотвращаете удаление одного кадра и добавление класса к элементу body.

Просто включите переопределение после загрузки начальной загрузки.

Адам
источник
-4 

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

Алексей Ш.
источник