Ouvrir une fenêtre émergente
Résolu/Fermé
mont_dani
Messages postés
226
Date d'inscription
mardi 6 juin 2017
Statut
Membre
Dernière intervention
4 mars 2023
-
12 mars 2021 à 08:54
mont_dani Messages postés 226 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 4 mars 2023 - 15 mars 2021 à 14:58
mont_dani Messages postés 226 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 4 mars 2023 - 15 mars 2021 à 14:58
A voir également:
- Ouvrir une fenêtre émergente
- Ouvrir fichier rar - Guide
- Ouvrir ma boîte mail ✓ - Forum Messagerie
- Ouvrir fichier .bin - Guide
- Comment ouvrir un fichier apk ? - Guide
- Ouvrir un fichier .dat - Guide
2 réponses
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
12 mars 2021 à 08:59
12 mars 2021 à 08:59
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
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
mont_dani
Messages postés
226
Date d'inscription
mardi 6 juin 2017
Statut
Membre
Dernière intervention
4 mars 2023
12 mars 2021 à 09:21
12 mars 2021 à 09:21
Bonjour Jordane
Merci pour ta réponse.
Je regarde et te raconte
Merci pour ta réponse.
Je regarde et te raconte
13 mars 2021 à 20:04
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?
15 mars 2021 à 14:58
je met le sujet en resolu