Salve Ragazzi, ho risolto il questo modo:
Codice PHP:
<?phpsession_start();?>
<?php if(!isset($_SESSION['jquery_popup'])) { $_SESSION['jquery_popup'] = 1; ?>
<style type="text/css"> * { margin:0; padding:0; } body { font:12px, Georgia, "Times New Roman", Times, serif; } #mask { position:absolute; left:0; top:0; z-index:99998; background-color: #4D4D4D; display:none; } #boxes .window { position:absolute; left:0; top:0; width:500px; height:330px; display:none; z-index:99999; padding:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #333333; -moz-box-shadow:4px 4px 30px #130507; -webkit-box-shadow:4px 4px 30px #130507; box-shadow:4px 4px 30px #130507; -moz-transition:top 800ms; -o-transition:top 800ms; -webkit-transition:top 800ms; transition:top 800ms; } #boxes #dialog { width:500px; height:330px; padding:0px; background-color: #FFFFFF; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var id = '#dialog'; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(800); $('#mask').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2 -50); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(500); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).preventDefault(); $(this).hide(); $('.window').hide(); }); }); </script> <div id="boxes"> <div style="top:150px; left: 551.5px; display: none;" id="dialog" class="window"> <div style=" float:left; font-weight:bold; font-size:16px; padding-left:5px;"> Metti MI PIACE</div> <div align="right" style="font-weight:bold; margin:5px 3px 0 0;"><a href="javascript:void()" class="close"><img src="close.png" width="16" style="border:none; cursor:pointer;" /></a></div> <div align="center" style="margin:5px 0 5px 0;"> <iframe scrolling="no" frameborder="0" src="ciccio/face.html" style="border: none; width:490px; height: 260px;"></iframe> </div> </div> <!-- Mask to cover the whole screen --> <div style="width: 2000px; height: 2000px; display: none; opacity: 0.7;" id="mask"></div> </div> <?php } //if((isset($_SESSION['jquery_popup']))) { unset($_SESSION['jquery_popup']); } //uncomment for testing ?>
Solo che non riesco a far in modo che per chiudere la finestra, oltre a cliccare sulla x, vorrei far in modo che anche quando clicco su qualsiasi parte dello schermo si chiuda, sapete come posso fare ? grazie