Модальное окно встраивается в страницу Есть решение
Добрый день.
Возникла проблема - решил сделать приветственное модальное окно, прописал ccs, js, начинаю встраивать контейнеры в index.html, а модальное окно просто высвечивается текстом прямо внутри страницы. То есть не всплывающим окном, а просто встраивается в текст требуемой страницы.
Пробовал прописывать js и css в отдельные файлы и обращаться к ним до вывода контейнеров, но тогда вообще ничего не происходит.
В чем может быть проблема? Почему некорректно воспринимаются контейнеры?
2 ответа
С большой долей вероятности косяки в css оформлении желаемого окна. Какие-то отдельные файлы, контейнеры и всё это сбившееся в кучу тут непричем. Важно понимание процесса. Модальное окно чаще уже является встроенным в страницу контентом. Оно отличается от всего прочего только визуально красивым выводом на отдельном слое.
У вас должен быть на странице создан контент, но до поры до времени не виден, а когда вызываете форму окна, то следует понимать как это должно строиться на странице. Страница - это слоеный пирог и надо немного потренироваться выводить слои поверх друг друга правильно.
Есс-но z-index'ы выбираете так, чтобы "уши" нижестоящих не торчали.
Затем создаете какой-нибудь примитив на JS для вызова окошка на полупрозрачном затемненном фоне примерно так (можете это тоже запихнуть для отладки кучи в index.html)
Ну и какую-нибудь ссылку, кнопку или ещё чего заставляете выводить это всё
А в самом окне делаете красивый крестик для закрытия и даете ему право
Сам шаблон (кусок вашего index.html) выглядит так
Тут работы на 10 строчек кода, включая стили и скрипты. :)
После того как всё заработает можно будет разнести стили отдельно, скрипты отдельно, контент оставить генериться в шаблоне. Только не плодите много файлов. Цепляйте к основным shop.css, shop.js каким-нибудь. Чтобы красиво было, а не куча-мала. В процессе отладки проще, когда все в одном окне ... править так легче.
Ну и было бы неплохо почитать в сети мануалы по созданию всяких модальных окон, чтобы освоить на простых примерах сам процесс и, возможно, выбрать для себя подходящее решение из кучи возможных. Способов-то много. Начните с азов.