Próbuję zrobić okienko powiększające obraz, które wyłącza się po kliknięciu na nie. Działa bez problemu na operze, chromie i ff. Na safari nie chce się wyłączyć, a na IE w ogóle nie działa. Gdzie może być błąd? Skrypt odpalam na wordpressie.

Skrypt wygląda tak:

[HTML] pobierz, plaintext 
  1. function openWindow(url) {
  2.     if(window.innerWidth >= 640) {
  3.  
  4.        jQuery('body').prepend('<div id="popupback"></div>');
  5.        jQuery('body').prepend('<div id="popupwindow" onclick="closeWindow()"><img id="popupimg" class="img-responsive" src="'+url+'" /></div>');
  6.  
  7.        var divwidth = jQuery('#popupwindow').width();
  8.        var divheight = jQuery('#popupwindow').height();
  9.        var toppos = (window.innerHeight - divheight)/2;
  10.        var leftpos = (window.innerWidth - divwidth)/2;
  11.        jQuery('#popupwindow').css({'top': toppos, 'left': leftpos, 'cursor': 'pointer', 'visibility':'visible'});
  12.  
  13.     }   
  14. }
  15.  
  16. function closeWindow() {
  17.          jQuery('#popupwindow').remove();
  18.          jQuery('#popupback').remove();
  19. }
[HTML] pobierz, plaintext


CSS:

[HTML] pobierz, plaintext 
  1. #popupwindow {
  2.  
  3. 	width: 700px;
  4. 	height: 500px;
  5. 	position: fixed;
  6. 	z-index: 4;
  7. 	visibility:none;
  8. 	background-color:white;
  9. 	border: 5px black solid;
  10. 	text-align:center;                    
  11. }
  12.  
  13. #popupback {
  14.  
  15. 	width: 100%;
  16. 	height: 100%;
  17. 	position:fixed;
  18. 	z-index:3;
  19. 	visibility:none;
  20. 	background-color:black;
  21. 	opacity: 0.8;  
  22. }
  23.  
  24. #popupimg {
  25.  
  26. 	position:relative;
  27. 	margin:auto;
  28. 	top:50%;
  29. 	-ms-transform: translateY(-50%); 
  30.     	-webkit-transform: translateY(-50%); 
  31.     	transform: translateY(-50%);
  32.  
  33.  
  34. }
  35.  
  36. .popup-link {
  37. 	display:block;
  38. }
  39.  
  40.  
  41. @media screen and (max-width: 640px) {
  42.  
  43.  
  44. 	#popupwindow {
  45.  
  46.                         display:none;      
  47.          }
  48.  
  49. 	#popupback {
  50. 		display: none;
  51. 	}
  52.  
  53. }
[HTML] pobierz, plaintext


Skrypt wywołuję w pętli wordpress przy miniaturkach:

[PHP] pobierz, plaintext 
  1. <?php 
  2.          if ( has_post_thumbnail() ) {
  3. 	            $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
  4. 	            echo '<a class="popup-link" onclick="openWindow(\' ' . $large_image_url[0] . ' \' )" href="#mini-portfolio" title="' . the_title_attribute( 'echo=0' ) .   '">';
  5. 	            the_post_thumbnail();
  6. 	            echo '</a>';
  7.          }
  8. ?>
[PHP] pobierz, plaintext


Wygląda na to że IE nie respektuje atrybutu onclick przy linkach, działa jakby był tylko href i wszystkie miniaturki kierują mi do #mini-portfolio zamiast otwierać nowego diva ze zdjęciem. Natomiast dlaczego safari nie wyłącza okna to nie mam pojęcia. Pomoże ktoś rozwiązać te problemy?