[Jquery] problema modal box su iframe

21-07-2014, 12.02.35

Ciao ragazzi,

in una pagina php ho messo un iframe che richiama un sito esterno. All'interno del tag body ma fuori dall'iframe
ho messo una popup che volevo richiamare con javascript per attivare questa funzione ogni tot secondi, ma non
riesco a far funzionare la popup: ho messo un alert nella funzione e quindi so che la funzione viene eseguita,
ma la popup non appare. La cosa strana è che se tolgo l'iframe, invece, funziona. Sapete dirmi dove sbaglio?
Si può lanciare una popup su un iframe a schermo intero?

questo è il codice della pagina html

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
        </style>
        
          <!-- Bootstrap stile-->
		<link href="template/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css" href="template/css/bootstrap-theme.css"/>
		<script src="template/js/respond.min.js"></script>
		<script src="template/js/css3-mediaqueries.js"></script>
        
        <!-- Stile custom -->
		<link href="template/css/custom.css" rel="stylesheet" type="text/css">

        <script src="js/jquery-1.11.0.min.js"></script>
        
        <!-- Bootstrap js -->
        <script type="text/javascript" src="template/js/bootstrap.min.js"></script>
        
        <script type=text/javascript>
        	function mostraPopUp() {
        		alert("ciao");
			$('#popUpIframe').modal('show');
			setTimeout('mostraPopUp()', 3000);
		}
        
        	timeout = setTimeout('mostraPopUp()', 10000);
        	
        </script>
    </head>
    <body onload=mostraPopUp()>
         <iframe width="100%" height="100%" <?php echo"src=\"http://www.unsito.it"; ?> />
         
    <!-- PopUp -->
	<div class="modal fade" id="popUpIframe" tabindex="-1" role="dialog" aria-labelledby="popUpIframe" aria-hidden="true">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content popup">
		 <div class="popupTop">
		  <img src="img/placeholder.jpg" class="img-responsive"/>
		  <div class="popupOverlay h3"> Lorem ipsum dolor sit amet </div>
		 </div>
		 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum, ligula non euismod posuere, odio diam porta quam, id volutpat lorem neque eu ipsum. Praesent faucibus faucibus justo, dignissim placerat nulla. Donec massa diam, faucibus ut lacus ut, interdum gravida justo. Sed dapibus semper justo, at porta nibh dictum sit amet. Donec porta nibh odio, et adipiscing justo dictum consequat. Integer blandit venenatis arcu. </p>
		 
	    </div>
	  </div>
	</div>
    <!-- PopUp -->
    </body>
</html>

**NLSweb** · 21-07-2014, 13.14.45

noto che hai il body con overflow hidden , cio' significa che non puoi scorrere la pagina
ma iframe al 100% , ti occupa tutta la finestra .. ed il popup e' posizionato dopo iframe (quindi al di sotto.. a meno che non abbia specificato in modo diverso nel css)

se la funzione viene eseguita , probabilmente non lo vedi solo perche' si trova al di sotto della finestra che non puoi scorrere

21-07-2014, 16.52.08

Grazie NLSweb, ho spostato la popup sopra il div e funziona!

Discussione: [Jquery] problema modal box su iframe

LinkBack

Strumenti discussione

Display

[Jquery] problema modal box su iframe

Regole di scrittura