Sujet: Popup HTML construit dynamiquement (Lu 5945 fois)

Otomatic · « **le:** mercredi 20 février 2019, 17:46 »

Bonjour,

Les “popup” en modal sur clic ou au survol, je sais faire, en HTML et css et sans javascript.

Par exemple sur cette page : https://aviatechno.net/constellation/constel_all_msn.php
- popup modal en cliquant sur Légende (À droite)
Puis, après avoir valider OK pour obtenir la liste complète :
- popup au survol du MSN 1962

Le problème est que ce type de popup a un contenu existant déjà — il est simplement caché (display:none;) ou tranparent (opacity:0;)— et si cela ne porte pas à conséquence avec quelques uns, ça devient prohibitif avec les 856 popups qu'il faudrait pour cette page, ce qui représenterait environ 7 Mo de données textuelles.

Créer le contenu d'un “popup” par requête SQL ne me pose aucun problème à partir du MSN sur lequel on clique, ce que je ne sais pas faire, c'est comment rester sur la même page pour créer un “popup” à contenu dynamique.

Je ne sais pas si je me suis bien expliqué... mais, avez-vous des idées ?

alex · « **Réponse #1 le:** mercredi 20 février 2019, 19:03 »

Alors là, le JS, tu ne vas pas y couper si tu veux du dynamique...

J'ai trouvé un petit exemple pour charger un fichier PHP qui ira chercher le contenu :
(c'est avec Bootstrap, on ne va pas s'emmerder pour monter le Modal)

Code

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Exemple Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<!-- Affichage du Modal avec un bouton -->
<button type="button" class="btn btn-success openBtn">Ouvrir le Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Contenu du Modal-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal avec contenu dynamique</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>

<script>
// Ouvrir le modal avec le contenu dynamique
$('.openBtn').on('click',function(){
    $('.modal-body').load('contenu.php',function(){
        $('#myModal').modal({show:true});
    });
});
</script>


</body>
</html>

Comme tu le vois, c'est le fichier contenu.php dans le JS qui va chercher le contenu du modal.

Otomatic · « **Réponse #2 le:** mercredi 20 février 2019, 20:24 »

Bonsoir,

J'va étudier ça demain. Le seul truc qui me préoccupe, c'est de passer un paramètre (En l'occurrence soit le MSN, soit l'id dans la table) au script contenu.php, peut-être par une variable de session.

alex · « **Réponse #3 le:** mercredi 20 février 2019, 20:48 »

Oh y a pas de souci.
Tu peux passer les paramètres que tu veux à ton fichier.

Par exemple, ça pourrait être :

Code

<script>
// Ouvrir le modal avec le contenu dynamique
$('.openBtn').on('click',function(){
    $('.modal-body').load('../dynamic_content/SQL_content/contenu.php?id=machin&bidule=truc',function(){
        $('#myModal').modal({show:true});
    });
});
</script>

Il faut juste faire gaffe de n'utiliser qu'une URL en chemins relatifs.
Passer une URL débutant par HTTP(s) ne marchera pas si un header Access-Control-Allow-Origin n'est pas défini sur le site cible.
Sinon, le popup modal pourrait être utilisé pour contourner l'interdiction des Iframe par l'header X-Frame-Options.

Autrement, le code donné peut directement être copié/collé et exécuté pour étude. Il faut juste modifier l'appel au fichier PHP, c'est tout.

Otomatic · « **Réponse #4 le:** mercredi 20 février 2019, 21:09 »

Bonsoir,

Merci beaucoup pour tous les tuyaux !
Ça me plaît et me paraît beaucoup plus simple que je pensais.
Là, je suis sur Smartphone, ce qui veut dire que tu as un site "responsible". En principe, le PC est mis hors tension vers 20h.
Bonne soirée

alex · « **Réponse #5 le:** mercredi 20 février 2019, 21:19 »

Tiens moi au jus.

Si tu ne connais pas les Modal avec Bootstrap, tu peux jeter un oeil ici : (notamment pour faire des modal d'une taille voulue)
- https://www.w3schools.com/bootstrap/bootstrap_modal.asp
- https://getbootstrap.com/docs/4.0/components/modal/

Otomatic · « **Réponse #6 le:** jeudi 21 février 2019, 12:21 »

Bonjour,

Pour le moment, :
- Point positif : ça “marchotte”
- Points négatifs :

Fout en l'air mes propres css
Dialogue modal, certes non dynamique, je sais faire avec moins de 50 lignes de css et 10 lignes html
Là, il faut plus de 100 ko de js et 120 ko de css
Va falloir que je fasse le tri des css, comme je l'avais fait pour LightBox et Flowplayer

Bref, ça attendra “un certain temps” avant production.

Otomatic · « **Réponse #7 le:** jeudi 21 février 2019, 16:42 »

Bonjour,

On avance doucement, il me fallait déjà vérifier que le passage de paramètres au script php fonctionne correctement.
Voilà le genre de “modal dynamique” que je voudrais — pour le moment ce ne sont que des pages dynamiques.

https://aviatechno.net/constellation/constel_all_msn.php
- puis bouton OK pour générer tous les items de la BDD
- puis click sur 1962 ou 1963
pour bien voir le contenu différent généré par ..../details_msn.php?id=2 ou id=3

À la limite je pourrais peut-être générer des iframes dynamiques mais avec un bouton de fermeture.

alex · « **Réponse #8 le:** jeudi 21 février 2019, 20:23 »

C'est pas un modal, c'est un tableau qui ouvre une espèce de modal, sur ton lien.
Un modal se détache nettement du fond comme un popup, sans les inconvénients du popup qui peut être bloqué dans les navigateurs.

Comment ça, c'est pas dynamique ?
Tu veux un contenu qui pourrait être changé DANS le modal, c'est ça ? Ou ouvrir un autre modal en fermant le premier.

Dans ce cas, appelle ton modal (depuis le modal existant) en utilisant des liens ou boutons onclick="openBtn('page.php')" auquel tu passes la page en paramètre.
Dans le JS, il faudra juste utiliser une variable pour le contenu demandé à la place d'un nom de fichier en dur.

Pour ce qui est de la place occupée par l'engin, on peut faire mieux.
Sur le site de Bootstrap, tu peux récupérer le JS modal seul, sans récupérer l'ensemble (bootstrap.js).

C'est con, ça marchait bien...

Otomatic · « **Réponse #9 le:** jeudi 21 février 2019, 21:02 »

Citation de: alex le jeudi 21 février 2019, 20:23

C'est pas un modal, c'est un tableau qui ouvre une espèce de modal, sur ton lien.

C'est bien ce que j'ai écrit : pour le moment ce ne sont que des pages dynamiques.. Avant de passer ça en modal, faut bien vérifier que le contenu est bien changé par ce quoi il doit l'être. Je procède toujours par la validation d'étapes successives et jamais tout en même temps.
Un modal, il y en a un sur la même page, en cliquant sur Légende.

alex · « **Réponse #10 le:** jeudi 21 février 2019, 21:08 »

Ah, d'accord.

Otomatic · « **Réponse #11 le:** dimanche 24 février 2019, 13:53 »

Bonjour,

Avec Jquery uniquement, sans bootstrap.js

Code

<script>
function loadDynamicContentModal(id) {
	var options = {
	id : true,
	};
	$('#modal-contenu').load('details_msn.php?id=' + id,
		function() {$('#bootstrap-modal').modal({show : true});
			});
	}
</script>

<div id="bootstrap-modal" class="modal">
  <div>
    <div id="modal-contenu"></div>
  </div>
</div>

On peut le voir sur la page :
https://aviatechno.net/constellation/constel_all_msn.php
après avoir cliqué OK et dans la colonne MSN, si on clique sur :

- 1962 -> popup classique
- 1963 -> lancement script php pour 1 seul item
- 1964 à 1966 -> modal dynamique.

Problème :
- par encore réussi à mettre un bouton ou lien pour fermer le modal.
- modal en position fixe et impossible à mettre en relatif par rapport à l'endroit du "clic".
Si je n'arrive pas à mettre le modal en relatif, ce ne sera plus la peine de l'utiliser.

Otomatic · « **Réponse #12 le:** dimanche 24 février 2019, 17:33 »

Bonjour (La foule

)

Je pense être arrivé à ce que je voulais en mélangeant css et Javascript (Jquery).
Script Javascript :

Code

<script>
	function loadDynamicContenuModal(id) {
		var options = {
			id : true,
		};
		$('#open-contenu').load('details_msn.php?id=' + id,
				function() {
					$('#openMsn').modalDialog({
						opacity : 1
					});
				});
	}
</script>

html :

Code

<div id="openMsn" class="modalDialog">
	<div>
		<a href="#close" title="Close" class="close">X</a>
		<div id="open-contenu"></div>
	</div>
</div>

<a class='lient' href='#openMsn' onclick='loadDynamicContenuModal(2)'>1962</a>

L'affichage du modal est bien en relatif et avec un X de fermeture.
CSS :

Code

/* Dialogue modal */
.modalDialog {
	position: fixed;
	font-family:Arial,Helvetica,sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 1020px;
	position: relative;
	margin: 10% auto;
	padding: 5px;
	border:2px solid #CC9966;
	border-radius: 5px;
	background: #F1EAD8;
	background: -moz-linear-gradient(#F1EAD8,#FEFDFA);
	background: -webkit-linear-gradient(#F1EAD8,#FEFDFA);
	background: -o-linear-gradient(#F1EAD8,#FEFDFA);
}

.close {
	background: #F1EAD8;
	color: #CC9966;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #FEFDFA; }

alex · « **Réponse #13 le:** dimanche 24 février 2019, 19:12 »

Et ben voilà. Tu y seras arrivé.

Chez oim, forum libre

Auteur Sujet: Popup HTML construit dynamiquement (Lu 5945 fois)

Otomatic

Popup HTML construit dynamiquement

alex

Popup HTML construit dynamiquement

Otomatic

Popup HTML construit dynamiquement

alex

Popup HTML construit dynamiquement

Otomatic

Popup HTML construit dynamiquement

alex

Popup HTML construit dynamiquement

Otomatic

Popup HTML construit dynamiquement

Otomatic

Popup HTML construit dynamiquement

alex

Popup HTML construit dynamiquement

Otomatic

Popup HTML construit dynamiquement

alex

Popup HTML construit dynamiquement

Otomatic

Popup HTML construit dynamiquement

Otomatic

Popup HTML construit dynamiquement

alex

Popup HTML construit dynamiquement

Réponse Rapide