PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
bmbly
Отправлено: 09 Ноября, 2017 - 00:05:46
Post Id



Новичок


Покинул форум
Сообщений всего: 1
Дата рег-ции: Нояб. 2017  


Помог: 0 раз(а)




Доброго времени суток!
Есть модальное окно:
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" и т.д. И соответственно чтобы закрывались окна корректно.
 
 Top
Sail
Отправлено: 11 Ноября, 2017 - 14:53:58
Post Id



Участник


Покинул форум
Сообщений всего: 1085
Дата рег-ции: Февр. 2014  


Помог: 56 раз(а)




bmbly, воспользуйтесь data-атрибутами.
 
 Top
Vladimir Kheifets
Отправлено: 12 Ноября, 2017 - 15:16:31
Post Id



Частый гость


Покинул форум
Сообщений всего: 155
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 4 раз(а)




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.  


Удачи!
Прикреплено изображение (Нажмите для увеличения)
Untitled-1.png

(Отредактировано автором: 12 Ноября, 2017 - 15:19:12)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB