Открытие нескольких модальных полей на одной странице

У меня есть страница, которая должна иметь разные модальные блоки, открытые при нажатии на их соответствующую ссылку на странице. У меня есть структура и javascript для работы в ОДНОМ окне, но я не могу заставить его работать более чем на один. Я думаю, мне нужно пройти через каждый модальный блок ... но не могу понять синтаксис.Открытие нескольких модальных полей на одной странице

Это для сайта клиента WordPress, и я использую расширенные настраиваемые поля для заполнения содержимого. Страница еще не опубликована, так вот codepen, что показывает мой код: http://codepen.io/FelixB/pen/EPvEVG

Код:

var modal = document.getElementsByClassName('modal-window'); 

var btn = document.getElementsByClassName("click-to-open"); 

var span = document.getElementsByClassName("close")[0]; 

for (var i = 0; i < btn.length; i++) { 
    var thisBtn = btn[i] 
    thisBtn.onclick = function() { 
    alert("hello"); 

    //modal.style.display = "block"; 
    } 
} 

span.onclick = function() {  
    modal.style.display = "none"; 
} 

window.onclick = function(event) { 

}

источник

2016-01-13 Felix B

Вы должны сделать модальности уникальным, чтобы иметь возможность выбрать их позже. Один из способов сделать это - id.

<div id="modal-window-one" class="modal-window modal"></div> 
<div id="modal-window-two" class="modal-window modal"></div>

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

<div class="click-to-open" data-modal="modal-window-one"> //will open modal one 
<div class="click-to-open" data-modal="modal-window-two"> //will open modal two

А потом - событие:

var btn = document.getElementsByClassName("click-to-open"); 

for (var i = 0; i < btn.length; i++) { 
    var thisBtn = btn[i]; 
    thisBtn.addEventListener("click", function(){ 
    var modal = document.getElementById(this.dataset.modal); 
    modal.style.display = "block"; 
}, false);

Опять же - это один из возможных решений.

источник

2016-01-14 19:38:05 pgk

Успех! Это работает сейчас, после нескольких часов в час моих занятий с помощью возможностей. Спасибо!! (Я не могу выдвинуть, по-видимому, слишком новое. Как только смогу, я отвечу на этот ответ.) Еще раз спасибо! –

Я рад, что смог помочь. Не беспокойтесь о повышении, просто отметьте ответ как завершенный, так что другие пользователи не справляются с этим. :) – pgk

pgk, я надеюсь, что вы сможете помочь мне немного больше с этим проектом. Как я могу заставить модалы закрываться на клике вне самих модалов. Закрытие нажатием кнопки закрытия работает, но я хочу, чтобы они закрылись, если пользователь щелкнет в любом месте окна. Есть ли у вас какие-либо предложения? –

Ниже приведен пример отображения нескольких всплывающих окон с использованием бутстрапа, а также прикрепленный jsfiddle, который демонстрирует пример. Установите имя класса в модальное диалоговое окно.

<div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    ... 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div> </div></div>

Мгновенное создание модального диалогового окна.

$('.myModal').modal();

Ниже приводится работает jsfiddle https://jsfiddle.net/niteshp27/msdg98vn/

источник

2017-02-01 11:40:10 Nitesh

Открытие нескольких модальных полей на одной странице

ответ

Смежные вопросы