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

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 28 сентября 2018 18:23 #

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

    ответить