Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Модальные окна на странице

Страниц (1): [1]
 

1. bmbly - 09 Ноября, 2017 - 00:05:46 - перейти к сообщению
Доброго времени суток!
Есть модальное окно:
CODE (htmlphp):
скопировать код в буфер обмена
  1. <div class="row" id="ex" style="display: none;">
  2.                         <div class="full_descr bounceInLeft animated">
  3.                             <div class="col-md-6 left_block">
  4.                                 <div class="title txt_semibold"><span>Заголовок названия проекта</span></div>
  5.                                 <img src="http://placehold.it/450x450" alt="">
  6.                             </div>
  7.                             <div class="col-md-6 description txt_normal">
  8.                                 <p></p>
  9.                                 <p><span class="txt_bold"></span></p>
  10.                                 <p><span class="txt_bold"></span></p>
  11.                                 <div class="buttons">
  12.                                     <a href="#" class="example_more">Подробнее</a>
  13.                                     <a href="#" class="example_close">Закрыть</a>
  14.                                 </div>
  15.                             </div>
  16.                         </div>
  17.                     </div>

Блок с ссылкой вызова модального окна:
CODE (htmlphp):
скопировать код в буфер обмена
  1. <div class="col-md-3 example_wrapper">
  2.                             <div class="fill wow bounceInLeft animated">
  3.                                 <h3 class="txt_light">Название видео</h3>
  4.                                 <a href="#" id="showEx" name="modal"><img src="https://thumb9.shutterstock.com/display_pic_with_logo/2403347/199425278/stock-vector-colored-flat-design-vector-illustration-icons-set-of-art-supplies-art-instruments-for-painting-199425278.jpg" alt=""></a>
  5.                             </div>
  6.                         </div>


Таких элементов на странице несколько, соответственно и модальных окон несколько. Как вызывать отдельно каждое модальное окно, для каждой отдельной ссылки, но чтобы не плодить id и class типа id="modal1", id="modal2" и т.д. И соответственно чтобы закрывались окна корректно.
2. Sail - 11 Ноября, 2017 - 14:53:58 - перейти к сообщению
bmbly, воспользуйтесь data-атрибутами.
3. Vladimir Kheifets - 12 Ноября, 2017 - 15:16:31 - перейти к сообщению
bmbly пишет:
Доброго времени суток!
....модальных окон несколько. Как вызывать отдельно каждое модальное окно, для каждой отдельной ссылки, но чтобы не плодить id и class типа id="modal1", id="modal2" и т.д. И соответственно чтобы закрывались окна корректно.

Добрый день!
Уточню задачу. Требуется выводить несколько модальных окон не плодя <div> и div id.
Каждое окно выводится по клику на линк и , например, по клику на крестик закрывается.
Одновременно несколько окон не выводится.

Вы можете посмотреть, как функционируют модальные окна здесь
https://www[dot]alto-booking[dot]com/
(см. скриншот с ниже)
Принцип реализации следующий:

1. Есть div для вывода модальных окон и iframe для загрузки контента
CODE (html):
скопировать код в буфер обмена
  1. <div id="modal"></div>
  2.    
  3. <iframe src='.....' id='modal_frame' name='modal_frame' height="0" width="0" frameborder='0'
  4.        onLoad="IframeToObj(this.id,'modal')" style="visibility:hidden;">
  5. </iframe>


3. В iframe по клику на линк загружается, например, content_modal.php
CODE (html):
скопировать код в буфер обмена
  1. <a href="content_modal.php" id="showEx" name="modal" target="modal_frame">.....</a>

content_modal.php
CODE (html):
скопировать код в буфер обмена
  1. <?
  2. .........
  3. .........
  4. ?>
  5. <html>
  6. <head>
  7. </head>
  8. <body>
  9. <div id="content">
  10. .................
  11. .................
  12. <div>
  13. </body>
  14. </html>


4. Функция IframeToObj копирует содержимое iframe расположенное между <body></body>
в <div id="modal"> и "показывает" его.

CODE (html):
скопировать код в буфер обмена
  1. <script>
  2. function IframeToObj( idf, ido){
  3. iframe = document.getElementById(idf);
  4. iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
  5. IframeInnerHTML = iframeDocument.body.innerHTML;
  6. Obj=window.document.getElementById(ido);
  7. Obj.innerHTML = iframeDocument.body.innerHTML;
  8. c= document.getElementById("content");
  9. w=c.offsetWidth;
  10. h=c.offsetHeight;
  11. //здесь изменяете свойста объекта modal
  12. Obj.style.width =w+"px";
  13. Obj.style.height=h+"px";
  14. ........................
  15. .......................
  16. Obj.style.display="block";
  17. }
  18. </script>
  19.  


Удачи!

 

Powered by ExBB FM 1.0 RC1