Changement d'allure d'une boite de dialogue
Changement d'allure d'une boite de dialogue - HTML/CSS - Programmation
Marsh Posté le 15-01-2014 à 16:03:11
ne le fait pas avec un alert( qui de toute façon laisse une grosse partie visible) mais fait le avec une fenetre modal en javascript.
Tu trouveras facilement des des scripts tout pret en cherchant jquery modal
---------------
Marsh Posté le 15-01-2014 à 17:04:30
bonjour, oui carrément d'accord avec toi, mais je suis pressé par le temps, ce que tu dois savoir c'est que l'index.html ne presente aucune image porno, juste un fond avec un choix de theme, ensuite c'est un template entièrement autonome sans html, donc ce disclaimer est nickel je voulais juste savoir si on peut l'améliorer dans l'ésthétique...
j'en doute car j'ai essayé divers code et sans resultat...
Je précise que je suis débutant ultra novice donc, je ne veux pas vous importuner...merci pour d'autres réponses et merci à toi Flo..
Marsh Posté le 15-01-2014 à 17:10:17
non, l'alert est complètement géré par le navigateur , tu n'as pas de marge de manoeuvre
---------------
Marsh Posté le 15-01-2014 à 17:41:14
ok je m'en doutais un peu, bon eh bien galère galère....j'ai cherché des tutoriaux pour une fenetre modale...j'ai trouvé ceci mais cela ne marche pas......voici le code complet, cela doit théoriquement ouvrir une fenetre modale, il faut bien que je commence par quelque chose...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai CSS</title>
<style type="text/CSS">
#fade { /*--Masque opaque noir de fond--*/
display: none; /*--masqué par défaut--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--masqué par défaut--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--Les différentes définitions de Box Shadow en CSS3--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--Coins arrondis en CSS3--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//Le code ici
});
//Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
//Récupérer les variables depuis le lien
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //La première valeur du lien
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({
'width': Number(popWidth)
})
.prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');
//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//On affecte le margin
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Effet fade-in du fond opaque
$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //...ils disparaissent ensemble
});
return false;
});
</script>
</head>
</html>
Marsh Posté le 17-01-2014 à 09:43:46
hello, personne ne peut m'aider sur une fenetre modal, quelles erreurs ai-je commise?
merci à tous
Marsh Posté le 17-01-2014 à 10:07:20
Ca marche à un détail prêt :
le javascript doit être executé une fois que la page HTML est chargé (sinon, $('a.poplight[href^=#]') est vide). Ton code doit donc être DANS le $(document).ready.
Et sinon, utilises une version un peu plus à jour de jquery , la 1.4 est assez ancienne quand même
---------------
Marsh Posté le 17-01-2014 à 15:37:30
salut merci flo, que pense tu de la 1.9, elle est plus recente donc dans l'appel du programme je remplace 1.4 par 1.9 c'est bien cela ?
Ce que tu as voulu dire c'est que je dois mettre ma page sur un serveur, pour l'ouvrir , car quand j'ouvre la page de mon bureau là cela ne marche pas en fait....
merci
Marsh Posté le 17-01-2014 à 15:55:49
euh tu veux dire que # doit être remplacer par l'url http du site.?car cela ne marche toujours pas, j'ai balancer l'index sur fazilla et lorsque j'ouvre , rien , blanc comme neige...
Marsh Posté le 17-01-2014 à 16:11:31
nein nein , regarde ligne 57 :
Code :
|
Message édité par flo850 le 17-01-2014 à 16:11:52
---------------
Marsh Posté le 17-01-2014 à 16:33:48
yes, mais je suis vraiment novice puissance 10, quesque le code d'initialisation en clair quel est les code....??
Je voulais te dire que j'ai copié la premiere partie du code, j'ai ensuite remplacé # par l'adresse url du site en question.....puis j'ai remplacé le # par l'adresse url du site et là cela marche bien la fenetre pop up s'ouvre...
<a href="#?w=500" rel="popup_name" class="poplight">En savoir plus</a>
j'ai mis l'adresse du site :
<a href="http://www.lllll.fr/?w=500" rel="popup_name" class="poplight">cliquez</a>
puis j'ai rajouter ceci :
<div id="popup_name" class="popup_block">
<h2>hello</h2>
<p>ceci est un pop up modal</p>
</div>
voilà c'est peut-être ce que tu voulais savoir, le problème c'est que je suis obligé de cliquer su "cliquez" pour voir apparaître le pop up....
voici le code complet:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Essai CSS</title>
<a href="http://www.llldll.fr?w=500" rel="popup_name" class="poplight">cliquez</a>
<div id="popup_name" class="popup_block">
<h2>hello</h2>
<p>ceci est un pop up modal</p>
</div>
<style type="text/CSS">
#fade { /*--Masque opaque noir de fond--*/
display: none; /*--masqué par défaut--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--masqué par défaut--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--Les différentes définitions de Box Shadow en CSS3--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--Coins arrondis en CSS3--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//Le code ici
});
//Lorsque vous cliquez sur un lien de la classe poplight et que le href commence par #
$('a.poplight[href^=http://llll.fr]').click(function() {
var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
var popURL = $(this).attr('href'); //Retrouver la largeur dans le href
//Récupérer les variables depuis le lien
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //La première valeur du lien
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({
'width': Number(popWidth)
})
.prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');
//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//On affecte le margin
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Effet fade-in du fond opaque
$('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
return false;
});
//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //...ils disparaissent ensemble
});
return false;
});
</script>
</head>
</html>
voilà qu'en penses tu
Marsh Posté le 20-01-2014 à 11:57:20
UP? estce qu'un bon chevalier pourrai m'aider...bon , le code ci dessus n'est pas le top, j'ai cherché des codes pour des alertes mais elles sont simple et parfois pas paramétrables,
je cherche à faire deux alertes, une avec un disclaimer sympa et image de fond, une redirection vers google ou autre si non et si oui redirection vers mon site...
La deuxieme est le choix des langues 3 choix, aanglais allemand et français avec les redirections correspondante et des petits drapeaux...
J'aimerai utiliser du jquery, une base css et du text...
Si vous avez une idée, merci beaucoup
Sujets relatifs:
- Récupérer le changement de focus
- Menu CSS bouge si changement de résolution d'écran ou zoom
- [Ada][Dialogic][Network] Agent de dialogue
- Création compte user et changement nom host ?
- Problème changement d'image lors d'un onclick
- [Résolu] Changement mot de passe SQL chez Free ?
- Boite de dialogue "voulez vous vraiment quitter ?"
- Changement de couleur de lien
- Boite de dialogue pour rechercher, modifier et ajouter des données.
Marsh Posté le 15-01-2014 à 15:56:34
Bonjour, je cherche une solution pour changer la police de caractère et la couleur d'une boite de dialogue type Alert en javasript,
voici le code merci infiniment...
</head>
<!-- Filtrage mineurs -->
<script language="JavaScript">
var msg = "ATTENTION : SITE PORNOGRAPHIQUE RESERVE AUX MAJEURS DE PLUS DE 18 ANS\n"+"Ce site Internet est réservé à un public majeur et averti et est conforme\n"+"à toutes les règlementations françaises en vigueur. Il contient des textes,"+"des liens et des photos classées X qui peuvent être choquantes pour\n"+"certaines sensibilités.\n"+"Je certifie sur l'honneur à :\n"+"- être majeur selon la loi en vigueur dans mon pays et que les lois de mon état ou mon pays m'autorisent a accéder à ce site et\n"+"que ce site a le droit de me transmettre de telles données.\n"+"- être informé du caractère pornographique du serveur auquel j'accède."+"-je déclare n'être choqué par aucun type de sexualité et m'interdit de\n"+"poursuivre la société éditrice de toute action judiciaire.\n"+"- consulter ce serveur à titre personnel sans impliquer de quelque manière"+"que ce soit une société privée ou un organisme public.\n"+"Je m'engage sur l'honneur à :\n"+"- ne pas faire état de l'existence de ce serveur et à ne pas en diffuser le \n"+"contenu à des mineurs et utiliser tous les moyens permettant d'empécher l'accès de ce site pour adulte à tout mineur.\n"+"- assumer ma responsabilité, si un mineur accède à ce serveur à cause de \n"+"négligences de ma part : absence de protection de l'ordinateur personnel, "+"absence de logiciel de censure, divulgation ou perte du mot de passe de sécurité.\n"+"- assumer ma responsabilité si une ou plusieurs de mes présentes déclarations "+"sont inexactes.\n"+"Toutes les images contenues dans ce site sont en accord avec la loi Française sur \n"+"la pornographie (aucune image de mineur n'est présente sur ce site)\n"+"J'ai lu attentivement les paragraphes ci-dessus et signe électroniquement mon accord\n"+"avec ce qui précède en cliquant sur le bouton OK\n\n"+"CLIQUEZ SUR OK POUR CONTINUER, ANNULER POUR QUITTER.\n\n"
if(!confirm(msg)){window.top.popup=0;window.top.location.replace("http://www.blabla.net" );}//-->
</script>
<!-- Fin filtrage mineurs -->
</head>