On the page tabs are organized through:

$(document).ready(function() { $("#tabs").tabs(); });

On each tab opens a video from YouTube in a modal window.

 <a href="#" onclick="open_popup('#box-2', 640, 360, 'ZoMo59c8mQ4')"> <img src="//img.youtube.com/vi/ZoMo59c8mQ4/mqdefault.jpg" width="310" height="180" > </a>

script:

 function open_popup(box, width, height, yt) { if(!$(box+' iframe').length && yt) { $(box).append('<iframe id="yt" width="'+width+'" height="'+height+'" src="//www.youtube.com/embed/'+yt+'?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>'); } $(box+' .popup-close').html('<div class="popup-l1"></div><div class="popup-l2"></div>'); if(width) $(box).css({'width': width, 'margin-left': -(width/2)}); if(height) $(box).css({'height': height, 'margin-top': -(height/2)}); else $(box).css('margin-top', -($(box).height()/2)); $(box).show();

On the first tab, everything works fine, but starting from the second and further on all tabs, the modal window does not open. If, after launching the video, return to the first tab, then there is a modal window. And it works correctly. z-index: 9. Why is the modal window not displayed on subsequent tabs? Where to dig?

  • This implementation of the modal window has no background, so the page jumps and is displayed only where it is: <div id="box-2" class="pop-up"></div> and since the closest div is on the first page, then the window is displayed in the same place. To solve this problem, I had to use another implementation of the modal window. I do not give the code because of bulkiness. - Ssssory
  • If someone decides to use this wonderful option, then the div can simply be taken out of the tabs. This option did not suit me due to the specifics of the task. - Ssssory

0