Как лучше сделать модальное окно на js?
Вот хочу создать например 3 модальных окон на каждые кнопки, и не знаю как правильнее, в html создать разметку модального окна, и скрывать по display:none/block . Или все таки лучше написать разметку в переменную , и добавлять и удалять через js?
Ответы (2 шт):
Если у вас модальное окно будет всегда для одной задачи с одинаковыми данными, то можно просто показывать/скрывать. Если у модального окна разные задачи, то лучше делать вставку окна в документ по запросу. При простых шаблонах, где только серединка меняется, например сообщение одно, это не проблема и можно как угодно. А если у окна меняется много чего (заголовок, размер, кнопки внизу, ...), то пришлось бы делать какие-то сильно-умные очистки сначала.
В вашем случае если для каждой кнопки всегда своё окно с одинаковыми данными внутри, то можно просто создать сразу три окна в HTML и показывать/скрывать каждое из них.
Или можно сделать универсальное окно, у которого один шаблон, но разные данные для каждой из кнопок. Это может уменьшить количество копипасты если у окна много элементов дизайна.
Расскажу на примере открытия модального окна для изменения полей имени и описания.
Для начала, вам необходимо будет сверстать так скажем компонент этого самого окна, как он будет выглядеть, будет ли у него затемнен задний фон, и прочие детали.
Лично я, размещаю разметку таких окон в теге <section> сразу после тега <body>. Естественно классу задаю так называемый модификатор класса modal-opened (подробнее можете ознакомиться с методологией БЭМ), он пишется сразу после основного класса <section class="modal modal-opened">, ему ставится css-правило visibility: visible; и opacity: 1; (для удобного стилизования всплытия окон).
В скрипте соотвественно прописывается обработчик, по клику на который будет удаляться класс modal-opened или добавляться.
Это стандартный способ открытия и закрытия модальных окон, именно с помощью добавления и удаления доп. классов (они же модификаторы класса).
модальная_переменная.classList.remove('modal_opened');