Модальное окно встраивается в страницу Есть решение

Добрый день.
Возникла проблема - решил сделать приветственное модальное окно, прописал ccs, js, начинаю встраивать контейнеры в index.html, а модальное окно просто высвечивается текстом прямо внутри страницы. То есть не всплывающим окном, а просто встраивается в текст требуемой страницы.

Пробовал прописывать js и css в отдельные файлы и обращаться к ним до вывода контейнеров, но тогда вообще ничего не происходит.

В чем может быть проблема? Почему некорректно воспринимаются контейнеры?

2 ответа

  • 2
    replicant 28 сентября 2018 18:18 # Решение

    С большой долей вероятности косяки в css оформлении желаемого окна. Какие-то отдельные файлы, контейнеры и всё это сбившееся в кучу тут непричем. Важно понимание процесса. Модальное окно чаще уже является встроенным в страницу контентом. Оно отличается от всего прочего только визуально красивым выводом на отдельном слое.

    У вас должен быть на странице создан контент, но до поры до времени не виден, а когда вызываете форму окна, то следует понимать как это должно строиться на странице. Страница - это слоеный пирог и надо немного потренироваться выводить слои поверх друг друга правильно.

    Разберем простейший случай. Это можно даже в index.html через теги <style></style> встроить.
    
    #wrap{display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); z-index:15000; overflow: auto;}
    #window{ width: 500px; height: 300px; margin: 200px auto; display: none; background: #fff;
    z-index: 20000; position: fixed; left: 0; right: 0; top: 0; bottom: 0;}
    
    Т.е. заготовка окна window нужных размеров на слое wrap уже есть. Вызовом меняются только свойства display и все. А чего там в этот window набито в качестве контента - не имеет значения, лишь бы у вкладываемых элементов свойства не "воевали" с контейнером.
    
    Для теста в этом куске css замените none на block в двух местах и прицепите к своему шаблону index.html.

    Есс-но z-index'ы выбираете так, чтобы "уши" нижестоящих не торчали.

    Затем создаете какой-нибудь примитив на JS для вызова окошка на полупрозрачном затемненном фоне примерно так (можете это тоже запихнуть для отладки кучи в index.html)

    <скрыпт>function show(state){ document.getElementById('window').style.display = state; document.getElementById('wrap').style.display = state; }</скрыпт>

    Ну и какую-нибудь ссылку, кнопку или ещё чего заставляете выводить это всё

    <div onclick="show('block')"><img src="красивая_кнопка.png" /></div>

    А в самом окне делаете красивый крестик для закрытия и даете ему право 

    <img onclick="show('none')" src="крестик.png"> есс-но этот крестик прячется внутри объекта id=window вместе с вашим контентом

    Сам шаблон (кусок вашего index.html) выглядит так

    <div onclick="show('none')" id="wrap"></div>
    <div id="window"><img  onclick="show('none')" src="крестик.png">
    
    пример контента с облаком тегов в модальном окне
    {$cloud = shopTageditorPlugin::tags($wa->shop->tags(100))}
    {if $cloud}{foreach $cloud as $tag}<a href="/tag/{$tag.uri_name}/">{$tag.name|escape}</a>{/foreach}{/if}
    
    </div>

    Тут работы на 10 строчек кода, включая стили и скрипты. :)

    После того как всё заработает можно будет разнести стили отдельно, скрипты отдельно, контент оставить генериться в шаблоне. Только не плодите много файлов. Цепляйте к основным shop.css, shop.js каким-нибудь. Чтобы красиво было, а не куча-мала. В процессе отладки проще, когда все в одном окне ... править так легче.

    • +2
      replicant replicant 28 сентября 2018 18:23 #

      Ну и было бы неплохо почитать в сети мануалы по созданию всяких модальных окон, чтобы освоить на простых примерах сам процесс и, возможно, выбрать для себя подходящее решение из кучи возможных. Способов-то много. Начните с азов.

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите