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