18041 sujets

Questions générales et questions de débutants

Aide ajout fenêtre modal / Pop-in

Pages :
Bonjour,
Étant novice en développement, j'aimerais ajouter sur mon site un fenêtre modale (pop-in ou fancybox) qui s'ouvre automatiquement et uniquement sur la page d'accueil ( et ce une ou deux fois par session/utilisateur par jour ), et pouvoir intégrer dans ce pop-in une page html que j'ai déjà conçu ( pour afficher une information importante, avec un bouton de redirection vers la page d'inscription de mon site ) .
Donc en gros j'aimerais juste savoir comment ajouter le conteneur ( le contenu étant déjà prêt ).
J'espère avoir été claire.

Merci d'avance pour vos réponses Smiley cligne
Merci pour votre réponse, cependant comment et où dois-je insérer ma page html pour qu'elle apparaisse dans la fenêtre ?
Sinon, je viens d'essayer d’intégrer le code de la fenêtre sur mon site, et la barre avec la croix pour fermer ou déplacer le popup n'apparait pas, et la fenêtre popup apparait sur toutes les pages de mon site.
Modifié par lpdc (30 Apr 2018 - 16:04)
Ok, on va oublier le jquery alors....

Ta boite de dialogue doit être particulière ? button de validation ? oui, non ? champs texte ? ETC;;; il faut préciser.
Si ta boite de dialogue n'est pas particulière et ne contient que du texte alors tu peux utiliser alert() en javascript
Modifié par JENCAL (30 Apr 2018 - 16:00)
Alors en faite j'aimerais que dans cette fenêtre apparaisse une page html css que j'ai déjà conçu, où se trouve l'information que je veux faire passer avec un bouton qui renvoie vers la page d'inscription de mon site.
je reprend un peux les bases aux cas où:
Une popup c'est une une boite qui vient se superposer à la page du site, ce n'est pas "une page" en elle même c'est un contenue afficher à un instant T. Une popup contient généralement du texte (ou liens (exemple ton lien d'inscription)).

Tu peux utiliser l'alerte en javascript que je t'ai conseillé juste avant, et mettre ton texte à l'intérieur avec ton lien etc... je te laisse tester.

EDIT : ok je viens de voir ton dernier message, oublie l'alerte en javascript car tu ne peux pas modifier le design.
Modifié par JENCAL (30 Apr 2018 - 16:21)
Du coup,
n'ayant pas ton code, je te renvoi vers un tuto permettant de faire cela.. à toi de te casser les dents dessus Smiley smile
Le code je peux vous l'envoyer si il le faut ( je l'ai générer via un site web conçu pour ), mais n'y a t'il pas moyen de le faire apparaitre dans la fenêtre pop-in directement en pointant vers le lien de ma page html que j'ai réalisé ?
pas compris la dernière phrase.

Le code qui est conçu par un site web c'est le code devant se trouver DANS la popin ?
la page html que vous avez réalisé, est-ce différent bien différent du code de ma question précédente ? *
Le seul pointeur (ou plutôt le seul lien) se trouvera DANS la popin en guise de lien <a href="" > classique.
Modifié par JENCAL (30 Apr 2018 - 16:39)
Oui le code conçu par le site web est le code que je voudrais trouver dans la popin et je l'ai copié dans une page nommé popin.html .
En gros il me manque le conteneur pour l'afficher sur ma page d'accueil.
lpdc a écrit :
Merci pour votre réponse, cependant comment et où dois-je insérer ma page html pour qu'elle apparaisse dans la fenêtre ?
Sinon, je viens d'essayer d’intégrer le code de la fenêtre sur mon site, et la barre avec la croix pour fermer ou déplacer le popup n'apparait pas, et la fenêtre popup apparait sur toutes les pages de mon site.

Là sans infos supplémentaire impossible de vous aider.
On ne connait pas l'architecture du site donc on ne peut pas répondre sur le pourquoi la popin s'affiche sur toutes les pages
On ne connais pas votre code pour répondre au fait que le fermer/déplacer n’apparaît pas.
Tout est une question d'intégration.
Du coup il est impossible de faire apparaitre une page html préconçu, dans la fenêtre pop-in, en pointant simplement vers son lien ?
Modifié par lpdc (30 Apr 2018 - 16:53)
si avec une <iframe> mais je n'utilise jamais d'iframe donc là je suis pas d'une grande utilité

peut être que...
en suivant le tuto dont je vous parlais vous pouvez remplacer le code suivant par celui d'après

<div id="openModal" class="modalDialog">
	<div>
		<a href="#close" title="Close" class="close">X</a>
		<h2>Modal Box</h2>
		<p>This is a sample modal box that can be created using the powers of CSS3.</p>
		<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
	</div>
</div>



par une iframe :

<div id="openModal" class="modalDialog">
	<div>
		<a href="#close" title="Close" class="close">X</a>
		<h2>Modal Box</h2>
		<iframe title="" src="VOTRE LIEN HTML"></iframe>
	</div>
</div>

Modifié par JENCAL (30 Apr 2018 - 16:56)
Merci, je vais essayer avec votre méthode, et ce code est a placer dans la partie Head ou Body ?
Et je vois qu'au début du code il y a une ancre pour ouvrir le popin, comment faire pour qu'il s'ouvre automatiquement dès l'arrivé de l'utilisateur sur la page d'accueil ?
Modifié par lpdc (30 Apr 2018 - 17:01)
Ce qui m'embête c'est que le tuto date de 2012... je sais pas si c'est la meilleur façon... d'habitue je le fais par jquery l'ajout de modal.
J'ai trouvé une autre solution qui fonctionne en local mais quand je l'intègre et l'upload sur mon site, le navigateur bloque le script.

Voici le code que j'ai intégrer sur mon site : 
<html>

<head>
   
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="functionpopup.js"></script>

</head>

<body class="">
    <div class="container">
  <!-- Modal -->
  	<div class="modal fade" id="myModal" role="dialog" style="display: none;">
    <div class="modal-dialog">
    
  <!-- Modal content-->
    <div class="modal-content">
   		<div class="modal-body" style="width : 600px; height : 550px;">
    	<iframe title="" src="popup.html" style="width : 100%; height : 100%;"></iframe>
   		</div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div></div>
      
    </div>
  </div>
  
</div>
  
</body>

</html>


Et le fichier .js : 
$(window).load(function()
{
    $('#myModal').modal('show');
});

Modifié par lpdc (02 May 2018 - 06:14)
Pages :
Sujet clos
Aller à