Форум

dima_riabets · #1 (**permalink**) 23.03.2014, 04:15

Вот ссылка на просмотр - http://learn.javascript.ru/play/SKrbhc

Вот код модального окна, построенного на спойлере и css:

<a class="see_stuff_full_file" href="javascript:id_url()">Видео #1</a>
 
<div id="id_content" style="display:none; z-index: 25052; top: 0; left: 0; width: 100%; height: 100%; position: fixed; background:url('http://usegame.ru/design/black.png');">
<div align="center" style="position:relative; z-index: 25060;">
<a href="javascript:id_url()">
<div style="height: 100px;"></div>
</a>
<table style="width: 760px; background:#fff; border: 1px Solid #777; padding: 5px;">
<tbody><tr><td style="padding: 3px; border-bottom: 1px Solid #E1E1E1;">
Name modal<span style="float: right;"><a style="text-decoration: none; font-size: 16px; font-weight: bold;" href="javascript:id_url()">×</a></span>
</td></tr>
<tr><td style="padding: 3px;">
<iframe width="746" height="400" src="//www.youtube.com/embed/DSr_JVTp8fI" frameborder="0" allowfullscreen=""></iframe>
</td></tr>
</tbody></table>
</div></div>
<script>
function id_url() {
 obj = document.getElementById("id_content");
 if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; }
 }
</script>

Проблема в том, что контент подгружается со всей страницей.
Как сделать чтобы видео к контенту подгружалось только после клика или тогда когда статус блока будет не display: none, а block; ?

dima_riabets · #2 (**permalink**) 23.03.2014, 13:37

рони · #3 (**permalink**) 23.03.2014, 13:55

dima_riabets,

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
   </head>
  <body>

<a class="see_stuff_full_file" href="javascript:id_url()">Видео #1</a>

<div id="id_content" style="display:none; z-index: 25052; top: 0; left: 0; width: 100%; height: 100%; position: fixed; background:url('http://usegame.ru/design/black.png');">
<div align="center" style="position:relative; z-index: 25060;">
<a href="javascript:id_url()">
<div style="height: 100px;"></div>
</a>
<table style="width: 760px; background:#fff; border: 1px Solid #777; padding: 5px;">
<tbody><tr><td style="padding: 3px; border-bottom: 1px Solid #E1E1E1;">
Name modal<span style="float: right;"><a style="text-decoration: none; font-size: 16px; font-weight: bold;" href="javascript:id_url()">×</a></span>
</td></tr>
<tr><td style="padding: 3px;">
<iframe width="746" height="400" src="" frameborder="0" allowfullscreen=""></iframe>
</td></tr>
</tbody></table>
</div></div>
<script>
function id_url() {
 var obj = document.getElementById("id_content"),
 iframe = obj.getElementsByTagName("iframe")[0];
 !iframe.getAttribute('src')  && (iframe.src =  "http://www.youtube.com/embed/DSr_JVTp8fI")
 if( obj.style.display == "none" ) { obj.style.display = "block"; } else { obj.style.display = "none"; }
 }
</script>

  </body>
</html>

dima_riabets · #4 (**permalink**) 23.03.2014, 22:52

thank you!

Форум

Справочник

Discord чат

Курсы javascript