Как создать модальное окно

@DEStroyerll_ · Регистрация: 31.01.2018

Author24 — интернет-сервис помощи студентам

Парни всем привет. Задача у меня такая. Есть несколько кнопок с одинаковым id

HTML5

 <td id="td-details">
                            <button class="btn-default-add" type="button" data-toggle="dropdown" id="detailsBtn">
                                <span>Details </span>
                            </button>
                        </td>

И есть модальное окно которое должно открываться при нажатии на все кнопки. Реализация на JS

Javascript

var modal = document.getElementById('modalWindow');
var btnOpen = document.getElementById('detailsBtn');
var btnClose = document.getElementsByClassName('btnClose')[0];
var xClose = document.getElementById('close-window');
 
btnOpen.onclick = function() {
    modal.style.display = "block";
};
btnClose.onclick = function() {
    modal.style.display = "none";
};
xClose.onclick = function () {
    modal.style.display = "none"
};
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
};

НО!! Когда я кликаю на первую кнопку, модальное окно открывается, а вот когда на вторую и т.д. то нет.
Как можно переделать скрипт??

@n1ghtwolf · 18.05.2019, 00:20

попробуй через each и this \ повесить функцию открытия на кнопку, вместо клика

@Андрей МСК · 18.05.2019, 04:34

Сразу ошибка: "Есть несколько кнопок с одинаковым id". На одной странице id не должны повторяться.

onclick - это обработчик событий, указывается обычно для какого-то HTML-элемента.
попробуйте использовать метод click (без on).

И вообще я бы использовал jQuery

Javascript

$("button.open_modal").click(function(){
  $("div#modal").show();
});
$("button.close_modal").click(function(){
  $("div#modal").hide();
});

HTML5

<button class='open_modal">Открыть окно</dutton>
<div id="modal">
  <button class='close_modal">Закрыть окно</dutton>
</div>

@klopp · 18.05.2019, 05:00

Сообщение от DEStroyerll_

Как можно переделать скрипт?

1.не использовать одинаковый id для разных элементов
2. получить список кнопок методом:
а) .getElementsByClassName
или
б) .querySelectorAll
3. либо навесить обработчик на родительский элемент(если открывающие и закрывающие кнопки в разных <td>)

@kalabuni · 18.05.2019, 12:15

Сообщение от DEStroyerll_

Задача у меня такая. Есть несколько кнопок с одинаковым id

очень плохая у вас задача

значение идентификатора id должно быть уникальным на странице
метод getElementById () отличается от, к примеру, метода getElementsByClassName () как раз отсутствием буковки s в названии метода, т.е. HTML-элементов с указанным именем класса может быть несколько (elements), а вот HTML-элемент с указанным значением идентификатора должен быть только один (element)

Как создать модальное окно

Решение

Решение

@n1ghtwolf 7 / 5 / 5 Регистрация: 22.04.2015 Сообщений: 39
	18.05.2019, 00:20	2
	попробуй через each и this \ повесить функцию открытия на кнопку, вместо клика 0

@klopp 566 / 465 / 183 Регистрация: 14.10.2017 Сообщений: 1,259
	18.05.2019, 05:00	4
	Сообщение от DEStroyerll_ Как можно переделать скрипт? 1.не использовать одинаковый id для разных элементов 2. получить список кнопок методом: а) .getElementsByClassName или б) .querySelectorAll 3. либо навесить обработчик на родительский элемент(если открывающие и закрывающие кнопки в разных <td>) 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	18.05.2019, 12:15	5
	Сообщение было отмечено DEStroyerll_ как решение Решение Сообщение от DEStroyerll_ Задача у меня такая. Есть несколько кнопок с одинаковым id очень плохая у вас задача значение идентификатора id должно быть уникальным на странице метод getElementById () отличается от, к примеру, метода getElementsByClassName () как раз отсутствием буковки s в названии метода, т.е. HTML-элементов с указанным именем класса может быть несколько (elements), а вот HTML-элемент с указанным значением идентификатора должен быть только один (element) 1

Опции темы