bmbly пишет:Доброго времени суток!
....модальных окон несколько. Как вызывать отдельно каждое модальное окно, для каждой отдельной ссылки, но чтобы не плодить id и class типа id="modal1", id="modal2" и т.д. И соответственно чтобы закрывались окна корректно.
Добрый день!
Уточню задачу. Требуется выводить несколько модальных окон не плодя <div> и div id.
Каждое окно выводится по клику на линк и , например, по клику на крестик закрывается.
Одновременно несколько окон не выводится.
Вы можете посмотреть, как функционируют модальные окна здесь
https://www[dot]alto-booking[dot]com/
(см. скриншот с ниже)
Принцип реализации следующий:
1. Есть div для вывода модальных окон и iframe для загрузки контента
CODE ( html):
скопировать код в буфер обмена
<div id="modal"></div> <iframe src='.....' id='modal_frame' name='modal_frame' height="0" width="0" frameborder='0' onLoad="IframeToObj(this.id,'modal')" style="visibility:hidden;"> </iframe>
3. В iframe по клику на линк загружается, например, content_modal.php
content_modal.php
CODE ( html):
скопировать код в буфер обмена
<? ......... ......... ?> <html> <head> </head> <body> <div id="content"> ................. ................. <div> </body> </html>
4. Функция IframeToObj копирует содержимое iframe расположенное между <body></body>
в <div id="modal"> и "показывает" его.
CODE ( html):
скопировать код в буфер обмена
<script> function IframeToObj( idf, ido){ iframe = document.getElementById(idf); iframeDocument = iframe.contentDocument || iframe.contentWindow.document; IframeInnerHTML = iframeDocument.body.innerHTML; Obj=window.document.getElementById(ido); Obj.innerHTML = iframeDocument.body.innerHTML; c= document.getElementById("content"); w=c.offsetWidth; h=c.offsetHeight; //здесь изменяете свойста объекта modal Obj.style.width =w+"px"; Obj.style.height=h+"px"; ........................ ....................... Obj.style.display="block"; } </script>
Удачи! Прикреплено изображение (Нажмите для увеличения)
(Отредактировано автором: 12 Ноября, 2017 - 15:19:12)
|