Ouvrir une fenêtre émergente

Résolu
mont_dani Messages postés 249 Statut Membre -  
mont_dani Messages postés 249 Statut Membre -
Bonjour.

Dans mon site web, je voudrais faire apparaitre une fenetre émergente 5 seconde après l'ouverture de ma page, quelle rest afficher 7 seconde avant de disparaitre.

J'ai trouver sur le net un script qui corrspond a ce que je veux en JS et la je beug un peu car je navigue bien entre css-html-php mais je ne connait pas JS.

Mon seul problème est que je ne veux pas ouvrir une autre page du navigateur, mais je veux afficher une fentre modal. 

<html>
<head>
 <link rel="stylesheet" type="text/css" href="css/general.css">
<script language="JavaScript">
<!-- Début
tempsFermeture = 10;
// Fermer le PopUp après 10 de secondes?
// Mettre 0 pour ne pas fermer le PopUp

function Debute(URL, WIDTH, HEIGHT) {
  propFenetre = "left=50,top=50,width=" + WIDTH + ",height=" + HEIGHT;
  pub = window.open("pensee-jour/pj-1.jpg", "pub", propFenetre);
  if (tempsFermeture) setTimeout("pub.close();", tempsFermeture*1000);
}

function PopUp(){
  url = "URL du PopUp";
  width = 500; // largeur du PopUp en pixels
  height = 400; // hauteur du PopUp en pixels
  delay = 2; // temps en seconde avant l’ouverture du PopUp
  timer = setTimeout("Debute(url, width, height)", delay*1000);
}
// Fin -->
</script>
</head>



<body onLoad="PopUp();">
<div id="center">
	<!--<img  id="image-vide" src="image/logo-1.gif" >-->
    http://www.trucsweb.com/tutoriels/javascript/tw85/
    <h1> Reiki Animalier et Humain</h1>
	<img   id="image-vide" src="image/reiki.jpg" >
	<H1 class="vide">au service de votre bien être<br> et de votre santé.<br>
  06.20.25.43.10.</H1>
	</div>
	</br></br></br></br></br></br></br></br></br></br>

</body>
</html>


Quelqu'un aurait-il une solution pour m'aider a résoudre mon problème?

Par avance merci

2 réponses

  1.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
     
    Bonjour,

    Il te faut donc remplacer le code de la fonction Popup() ... par un code permettant d'ouvrir une fenêtre modal.
    Et pour faire une modal en JS/CSS .. il existe de nombreux tutos/exemples sur le net
    https://www.google.com/search?q=javascript+css+modal

    0
    1. mont_dani Messages postés 249 Statut Membre
       
      Bonjour Jordane

      J'ai tardé a te raconter parceque mes connaissances en JS sont très limitées.

      Donc j'ai vu pas mal de page, de script, ...

      Je suis arrivé a faire un mixte de plusieurs script qui fait ce que je voulais faire.

      Le seul Hic: ca fonctionne en local mais pas sur le serveur.

      Voici mon html. 
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
 
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <meta name="viewport" content="width=device-width"/>
	   
	 
		<link rel="stylesheet" type="text/css" href="css/general.css">
		<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script>
		function showretard(){
      document.getElementById("retard").style.visibility = "visible";
    }
    setTimeout("showretard()", 3000); // aprés 3 sec
	
        $(function(){
                var popupWidth = '500px',
                    objPopup =  $('.popup-block');
 
                objPopup
                    .css("width", popupWidth)
                    .prepend('<p class="popup-btn-close" title="Fermer" alt="Close" style="color: #C9A0DC" ><b>X</b></p>')
                    .css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
                        // Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
                        "margin-top":  -objPopup.outerHeight(true)/2,
                        "margin-left": -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();
 
                $("<div/>", {
                    "class":"voile-noir",
                    "css":{
                        "filter":"alpha(opacity=80)"
                    }
                }).appendTo("body").fadeIn();
 
             $("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
                $('.voile-noir , .popup-block').fadeOut(function(){
                    $(".popup-btn-close, .voile-noir").remove();
                });
 
                return false;
            });
        });
   
        $(function(){
            $(".popup-light").click(function(){
                var obj = $(this),
                    popupClass = obj.data("popupClass"),
                    popupWidth = obj.data("popupWidth"),
                    objPopup =  $('.' + popupClass);
 
                objPopup
                    .css("width", popupWidth)
                    .prepend('<p class="popup-btn-close" title="Fermer" alt="Close" style="color: #C9A0DC"><b>X</b></p>')
                    .css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
                        // Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
                        "margin-top":  -objPopup.outerHeight(true)/2,
                        "margin-left": -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();
 
                $("<div/>", {
                    "class":"voile-noir",
                    "css":{
                        "filter":"alpha(opacity=80)"
                    }
                }).appendTo("body").fadeIn();
 
                return false;
            });
 
            $("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
                $('.voile-noir , .popup-block').fadeOut(function(){
                    $(".popup-btn-close, .voile-noir").remove();
                });
 
                return false;
            });
        });
    </script>	
		<style>
		.voile-noir {
            position: fixed;
            display: none;
            left: 0;
            top: 0; 
            width: 100%;
            height: 100%;
            opacity: 0.25;
            background: gray; 
            z-index: 9999;
        }
		
        .popup-block{
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            padding: 20px; 	
            z-index: 99999;
            font-size: 1.2em;
            background: #C9A0DC;
            border: 20px solid indigo;
            -webkit-box-shadow: 0px 0px 20px #000;
            -moz-box-shadow: 0px 0px 20px #000;
            box-shadow: 0px 0px 20px #000;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        .popup p {
            padding: 5px 10px;
            margin: 5px 0;
        }
        .popup-btn-close {
            float: right; 
            margin: -35px -35px 0 0;
			
        }
		
	/*fondu a l'affichage*/

		.fade-in {
		-webkit-animation-name: fadeInOpacity;
				animation-name: fadeInOpacity;
		-webkit-animation-iteration-count: 1;
				animation-iteration-count: 1;
		-webkit-animation-timing-function: ease-in;
				animation-timing-function: ease-in;
		-webkit-animation-duration: 8s;
				animation-duration: 8s;
  
		  }
@-webkit-keyframes fadeInOpacity {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
  
		}

		@keyframes fadeInOpacity {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
		}

   </style>
	
  </head>		
   
 <body  onLoad="popup-light">

	<div id="retard" style="visibility: hidden">
	    <div class="fade-in">
		<section class="popup-block"> 
			<div align="center" >
				<p style=" margin-top: -50px; color: #C9A0DC">LA PENSÉE DU JOUR</p>
				
				<img src="pensee-jour/pj-1.jpg" id="center" width="100%"/>
				
			</div>
		        </section>
		</div>
	</div>
	
       <!-- L'en-tête -->
 
      <?php include("menu.php"); ?>
         
         <!-- Le corps -->
 
       <?php include("vide.php"); ?>
      
         <!-- Le pied de page -->
 
       <?php include("pied_de_page.php"); ?>
 
   </body>
</html>


      Peux-tu me dire ou est le probleme?
      0
      1. mont_dani Messages postés 249 Statut Membre > mont_dani Messages postés 249 Statut Membre
         
        J'ai résolu le problème. Merci por ton aide.

        je met le sujet en resolu
        0
  2. mont_dani Messages postés 249 Statut Membre
     
    Bonjour Jordane

    Merci pour ta réponse.

    Je regarde et te raconte
    0

Discussions similaires

Connecté à internet mais rien ne charge
gandounet -
fabiennetitou -

10 réponses