Bouton qui déclenche un popup
ksomda
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016
-
1 mars 2014 à 21:20
ksomda Messages postés 36 Date d'inscription lundi 17 février 2014 Statut Membre Dernière intervention 2 septembre 2016 - 10 mars 2014 à 12:16
ksomda Messages postés 36 Date d'inscription lundi 17 février 2014 Statut Membre Dernière intervention 2 septembre 2016 - 10 mars 2014 à 12:16
5 réponses
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
344
2 mars 2014 à 01:20
2 mars 2014 à 01:20
Bonjour,
http://www.commentcamarche.net/contents/493-les-formulaires-html
Mais je suis bloqué car je ne sais pas comment faire une liste défilante dans un popupUne liste Déroulante dans un popup...se fait de la même manière que dans une page HTML. => avec des Balises SELECT.
http://www.commentcamarche.net/contents/493-les-formulaires-html
ksomda
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016
Modifié par jordane45 le 5/03/2014 à 12:00
Modifié par jordane45 le 5/03/2014 à 12:00
Bonjour excuse moi du retard. jai pu faire créer mon popup mais la liste déroulante s'affiche entièrement sans que je clique sur un élément donné. voici le code:
Aussi pour récupérer le path du choix effectué dans la liste déroulante la je n'ai pas une idée la dessus.Merci d'avance pour l'aide
<html xmlns="[http://www.w3.org/1999/xhtml]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ouvrir une pop-up et la centrer en javascript</title>
<script src="[https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js]"></script>
<script type="text/javascript">
function PopupTableau(titre)
{ w=open("",'image','width=400,height=400,menubar=no,toolbar=no,scrollbars=no,resizable=no');
w.document.write("<HTML>");
w.document.write("<HEAD>");
w.document.write("<TITLE>\"+titre+\"</TITLE>");
w.document.write("<style type=\"text/stylesheet\">");
w.document.write("body{font-size: 100%;}");
w.document.write("a{text-decoration: none;}");
w.document.write("#content{width: 220px;margin: 100px auto;font-size: 0.8125em;}");
w.document.write(".menu{width: auto;height: auto;-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);}");
w.document.write(".menu > li > a{background-color: #616975;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');border-bottom: 1px solid #33373d;-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;-moz-box-shadow: inset 0px 1px 0px 0px #878e98; box-shadow: inset 0px 1px 0px 0px #878e98;width: 300px;height: 2.75em;line-height: 2.75em;text-indent: 2.75em;display: block;position: relative;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-weight: 600;color:#858585;text-shadow: 0px 1px 0px rgba(0,0,0,.5);}");
w.document.write(".menu ul li a{background: #fff; border-bottom: 1px solid #efeff0;width: 200px; height: 2.75em; line-height: 2.75em; text-indent: 2.75em; display: block; position: relative; font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif; font-size: 0.923em;font-weight: 400;color: #878d95;}");
w.document.write(".menu > li > a:hover, .menu > li > a.active{ background-color: #35afe3;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db'); border-bottom: 1px solid #103c56;-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef; -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef; box-shadow: inset 0px 1px 0px 0px #6ad2ef;}");
w.document.write(".menu > li > a.active{ border-bottom: 1px solid #1a638f;}");
w.document.write(".item1 > a:before{ background-position: 0 0;}");
w.document.write(".item6 > a:before{background-position: -10 10;}");
w.document.write(".menu > li > a:before { content: ''; font-size: 36px; height: 1em; width: 1em; position: absolute; left: 0; top: 50%; margin: -.5em 0 0 0;}");
w.document.write(".sousMenu{width:400px;-webkit-box-shadow: 0px 1px 3px 0px #1286f5, 0px 0px 18px 0px #1286f5;-moz-box-shadow: 0px 1px 3px 0px #1286f5, 0px 0px 18px 0px #1286f5;box-shadow: 0px 1px 3px 0px #1286f5, 0px 0px 18px 0px #1286f5;}");
w.document.write(".sousMenu ul li a{background: #fff; border-bottom: 1px solid #efeff0;width: 200px;height: 2.75em;line-height: 2.75em;text-indent: 2.75em;display: block;position: relative;font-family:\"Helvetica Neue\", Helvetica, Arial, sans-serif;font-size: 0.923em;font-weight: 400;color: #878d95;}");
w.document.write(".sousMenu > li > a:hover, .menu > li > a.active{background-color: #35afe3;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');border-bottom: 1px solid #85808c;-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;box-shadow: inset 0px 1px 0px 0px #6ad2ef;}");
w.document.write(".sousMenu > li > a.active{border-bottom: 1px solid #1a638f;}");
w.document.write(".sousMenu > li > a:before { content: '';font-size: 36px;height: 1em;width: 1em; position: absolute; left: 0;top: 50%;margin: -.5em 0 0 0;}");
w.document.write("</style>");
//w.document.write("<script src=\"https:/ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"> <'/'script>");
w.document.write("</HEAD>");
w.document.write("<BODY bgcolor='#fff' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>");
w.document.write("<div id=\"content\">");
w.document.write("<ul class=\"menu\">");
w.document.write(" <li class=\"item1\"><a href=\"#\">Burkina</a>");
w.document.write(" <ul class=\"sousMenu\">");
w.document.write("<li class=\"item6\">");
w.document.write("<a href=\"#\">Kadiogo</a>");
w.document.write("<ul>");
w.document.write("<li><a href=\"#\"> Ouagadougou </a></li>");
w.document.write("<li><a href=\"#\"> Saaba </a></li>");
w.document.write("<li><a href=\"#\"> Komki-Ipala </a></li>");
w.document.write("</ul>");
w.document.write("</li>");
w.document.write("<li class=\"subitem2\">");
w.document.write("<a href=\"#\"> Houet </a>");
w.document.write("<ul>");
w.document.write(" <li><a> Bama </a></li>");
w.document.write(" <li><a> Bobo-Dioulasso </a></li>");
w.document.write("<li><a> Dandé </a></li>");
w.document.write("<li><a>Faramanaadéma </a></li>");
w.document.write("</ul>");
w.document.write("</li>");
w.document.write("<li class=\"subitem3\">");
w.document.write("<a href=\"#\">Balé</a>");
w.document.write("<ul>");
w.document.write("<li> <a> Bagassi </a></li>");
w.document.write("<li> <a> Boromo </a></li>");
w.document.write("<li> <a> Poura </a> </li>");
w.document.write("</ul>");
w.document.write("</li>");
w.document.write("</ul>");
w.document.write("</li>");
w.document.write("<li class=\"item2\"><a href=\"#\">Togo </a>");
w.document.write("<ul>");
w.document.write("<li class=\"subitem1\"><a href=\"#\">Lome </a></li>");
w.document.write("</ul>");
w.document.write("</li>");
w.document.write("<li class=\"item3\"><a href=\"#\">Ghana</a>");
w.document.write("<ul>");
w.document.write("<li class=\"subitem1\"><a href=\"#\"> Accra </a></li>");
w.document.write("<li class=\"subitem2\"><a href=\"#\">Tema</a></li>");
w.document.write("<li class=\"subitem3\"><a href=\"#\">Takoradi</a></li>");
w.document.write("</ul>");
w.document.write("</li>");
w.document.write("<li class=\"item4\"><a href=\"#\">Blog</a>");
w.document.write("<ul>");
w.document.write("<li class=\"subitem1\"><a href=\"#\">Santé</a></li>");
w.document.write("<li class=\"subitem2\"><a href=\"#\">Nutrition</a></li>");
w.document.write("</ul>");
w.document.write("</li>");
w.document.write("</ul>");
w.document.write("</div>");
w.document.write("</BODY></HTML>");
w.document.close();
}
</script>
</head>
<body>
<script type="text/javascript">
//Fonction de gestion du menu
$(function()
{
var menu_ul = $('.menu > li > ul'),menu_a = $('.menu > li > a');
//var sousMenu_ul = $('.sousMenu > li > ul'), sousMenuenu_a = $('.sousMenu > li > a');
menu_ul.hide();
//sousMenu.hide();
menu_a.click(function(e)
{
e.preventDefault();
if(!$(this).hasClass('active'))
{
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
}
else
{
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
/*sousMenu_a.click(function(e)
{
e.preventDefault();
if(!$(this).hasClass('active'))
{
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
}
else
{
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});*/
});
</script>
<a href="#null" onclick="PopupTableau('TEST');">Ouvrir et centrer la Pop-Up</a>
</body>
</html>
Aussi pour récupérer le path du choix effectué dans la liste déroulante la je n'ai pas une idée la dessus.Merci d'avance pour l'aide
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
344
5 mars 2014 à 13:11
5 mars 2014 à 13:11
Bonjour,
-> Il faut alimenter tes listes en fonction des choix faits auparavant.. pour ça il faut que tu t'oriente vers AJAX si tes données sont disponibles dans une BDD ou alors que tu ajoutes des conditions dans ton script pour afficher les éléments correspondants à un choix.
Exemple:
la liste déroulante s'affiche entièrement sans que je clique sur un élément donnéTu veux dire quoi.. que ta liste CONTIENT Toutes les données et pas seulement celles correspondantes à ton choix ?
-> Il faut alimenter tes listes en fonction des choix faits auparavant.. pour ça il faut que tu t'oriente vers AJAX si tes données sont disponibles dans une BDD ou alors que tu ajoutes des conditions dans ton script pour afficher les éléments correspondants à un choix.
Exemple:
<html>
<head>
<title> TEST </title>
</head>
<body>
<select id="s1" onchange="Alimenter_sel2(this.value)";>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
</select>
<select id="s2" onchange="alert(getSelectedText(this.id))">
</select>
<script type="text/javascript">
function Alimenter_sel2(sel1Value){
// ALimente la secode liste en fonction du choix de la premiere
var opt="";
var s2 = document.getElementById('s2');
switch(sel1Value){
case "1":
opt = '<option value="1">test choix1</option><option value="2">test2 choix1</option>';
break;
case "2":
opt ='<option value="10">test choix2</option><option value="20">test2 choix2</option>';
break;
}
s2.innerHTML = opt;
}
function getSelectedText(elementId) {
// Recupere le texte selectionné dans le SELECT
var elt = document.getElementById(elementId);
if (elt.selectedIndex == -1)
return null;
return elt.options[elt.selectedIndex].text;
}
</script>
</body>
</html>
ksomda
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016
Modifié par kazma le 7/03/2014 à 19:18
Modifié par kazma le 7/03/2014 à 19:18
bonjour
ok merci jordane45, mais le menu que je veux faire mettre dans le popup marche en html voici le code:
mais dans le popup ce code ci - dessus ne marche pas.
ensuite quand l'utilisateur a sélectionné "secteur 1" je souhaite récupérer "Burkina > Kadiogo > Ouagadougou > secteur 1". Quelqu'un peut - il m'apporté son aide? merci d'avance.
ok merci jordane45, mais le menu que je veux faire mettre dans le popup marche en html voici le code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Vertical Navigation Menu: CSS3 Coded</title>
<script src="[https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js]"></script>
</head>
<body>
<div id="content">
<ul class="menu">
<li class="item1"><a href="#">Burkina</a>
<ul class="menu">
<li class="toggleSubMenu">
<a href="#">Kadiogo</a>
<ul class="navigation">
<li class="toggleSubMenu"><a href="#"> Ouagadougou </a>
<ul class="subMenu">
<li><a href="#" title="Aller au secteur 1">secteur 1</a></li>
<li><a href="#" title="Aller au secteur 2">secteur 2</a></li>
<li><a href="#" title="Aller au secteur 2">secteur 3</a></li>
</ul>
</li>
<li><a href="#"> Saaba </a></li>
<li><a href="#"> Komki-Ipala </a></li>
</ul>
</li>
<li class="subitem2">
<a href="#"> Houet </a>
<ul>
<li><a> Bama </a></li>
<li><a> Bobo-Dioulasso </a></li>
<li><a> Dandé </a></li>
<li><a>Faramanaadéma </a></li>
</ul>
</li>
<li class="subitem3">
<a href="#">Balé</a>
<ul>
<li> <a> Bagassi </a></li>
<li> <a> Boromo </a></li>
<li> <a> Poura </a> </li>
</ul>
</li>
</ul>
</li>
<li class="item2"><a href="#">Togo <span>147</span></a>
<ul>
<li class="subitem1"><a href="#">Lome </a></li>
</ul>
</li>
<li class="item3"><a href="#">Ghana<span>340</span></a>
<ul>
<li class="subitem1"><a href="#"> Accra<span>14</span></a></li>
<li class="subitem2"><a href="#">Tema<span>6</span></a></li>
<li class="subitem3"><a href="#">Takoradi<span>2</span></a></li>
</ul>
</li>
<li class="item4"><a href="#">Blog<span>222</span></a>
<ul>
<li class="subitem1"><a href="#">Santé<span>14</span></a></li>
<li class="subitem2"><a href="#">Nutrition<span>6</span></a></li>
</ul>
</li>
</ul>
</div>
<!--initiate accordion-->
<script type="text/javascript">
$(document).ready( function ()
{
// On cache les sous-menus :
$(".navigation ul.subMenu").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function ()
{
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0)
{
$(this).next("ul.subMenu").slideUp("normal");
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
// $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
}
// On empêche le navigateur de suivre le lien :
return false;
});
}) ;
$(function()
{
var menu_ul = $('.menu > li > ul'),menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e)
{
e.preventDefault();
if(!$(this).hasClass('active'))
{
$(this).next("ul.menu").slideUp("normal");
$(this).addClass('active').next().stop(true,true).slideDown('normal');
}
else
{
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
</script>
</body>
</html>
mais dans le popup ce code ci - dessus ne marche pas.
ensuite quand l'utilisateur a sélectionné "secteur 1" je souhaite récupérer "Burkina > Kadiogo > Ouagadougou > secteur 1". Quelqu'un peut - il m'apporté son aide? merci d'avance.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
ksomda
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016
Modifié par jordane45 le 10/03/2014 à 14:05
Modifié par jordane45 le 10/03/2014 à 14:05
Bonjour tout le monde,
j'ai pu réaliser mon popup avec le menu déroulant à l'intérieur maintenant mon gros problème c'est de récupérer le path (chemin) de l'adresse sélection.quelqu'un peut t'il m'aider?
fichier test.html contenant le menu déroulant code source:
fichier popup.html fichier principal qui lance le popup:
Merci d'avance pour votre disponibilité..
j'ai pu réaliser mon popup avec le menu déroulant à l'intérieur maintenant mon gros problème c'est de récupérer le path (chemin) de l'adresse sélection.quelqu'un peut t'il m'aider?
fichier test.html contenant le menu déroulant code source:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Vertical Navigation Menu: CSS3 Coded</title>
<link rel="stylesheet" href="css/styles.css">
<script src="[https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js]"></script>
</head>
<body>
<div id="content">
<ul class="menu">
<li class="item1"><a href="#">Burkina</a>
<ul class="menu">
<li class="toggleSubMenu">
<a href="#">Kadiogo</a>
<ul class="navigation">
<li class="toggleSubMenu"><a href="#"> Ouagadougou </a>
<ul class="subMenu">
<li><a href="#" title="Aller au secteur 1">secteur 1</a></li>
<li><a href="#" title="Aller au secteur 2">secteur 2</a></li>
<li><a href="#" title="Aller au secteur 2">secteur 3</a></li>
</ul>
</li>
<li><a href="#"> Saaba </a></li>
<li><a href="#"> Komki-Ipala </a></li>
</ul>
</li>
<li class="subitem2">
<a href="#"> Houet </a>
<ul>
<li><a> Bama </a></li>
<li><a> Bobo-Dioulasso </a></li>
<li><a> Dandé </a></li>
<li><a>Faramanaadéma </a></li>
</ul>
</li>
<li class="subitem3">
<a href="#">Balé</a>
<ul>
<li> <a> Bagassi </a></li>
<li> <a> Boromo </a></li>
<li> <a> Poura </a> </li>
</ul>
</li>
</ul>
</li>
<li class="item2"><a href="#">Togo <span>147</span></a>
<ul>
<li class="subitem1"><a href="#">Lome </a></li>
</ul>
</li>
<li class="item3"><a href="#">Ghana<span>340</span></a>
<ul>
<li class="subitem1"><a href="#"> Accra<span>14</span></a></li>
<li class="subitem2"><a href="#">Tema<span>6</span></a></li>
<li class="subitem3"><a href="#">Takoradi<span>2</span></a></li>
</ul>
</li>
<li class="item4"><a href="#">Blog<span>222</span></a>
<ul>
<li class="subitem1"><a href="#">Santé<span>14</span></a></li>
<li class="subitem2"><a href="#">Nutrition<span>6</span></a></li>
</ul>
</li>
</ul>
</div>
<!--initiate accordion-->
<script type="text/javascript">
$(document).ready( function ()
{
// On cache les sous-menus :
$(".navigation ul.subMenu").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function ()
{
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0)
{
$(this).next("ul.subMenu").slideUp("normal");
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
// $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") });
}
// On empêche le navigateur de suivre le lien :
return false;
});
}) ;
$(function()
{
var menu_ul = $('.menu > li > ul'),menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e)
{
e.preventDefault();
if(!$(this).hasClass('active'))
{
$(this).next("ul.menu").slideUp("normal");
$(this).addClass('active').next().stop(true,true).slideDown('normal');
}
else
{
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});
</script>
</body>
</html>
fichier popup.html fichier principal qui lance le popup:
<html xmlns="[http://www.w3.org/1999/xhtml]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ouvrir une pop-up et la centrer en javascript</title>
<script type="text/javascript">
function PopupTableau()
{
//w=open("test.html",'','width=400,height=400,menubar=no,toolbar=no,scrollbars=no,resizable=no');
width = 450;
height = 400;
var left=0;
var top=0;
left = (screen.width-width)/2;
top = (screen.height-height)/2;
window.open("test.html","PopUp","width="+width+",height="+height+",location=yes,status=no,toolbar=no,scrollbars=no, top="+top+", left="+left);
}
</script>
<style>
.boutonInput
{
width: 750px;
border: 1px solid #000;
margin: 3px;
padding: 3px;
height: 32px;
}
.resultatPopup
{
float: left;
margin: 5px;
color: #555;
font-size:15px;
}
</style>
</head>
<body>
<div>Adresse:</div>
<div class="boutonInput"><div class="resultatPopup"> </div><div style="float:right;"><button href="" onclick="PopupTableau();">choix</button></div></div>
</body>
</html>
Merci d'avance pour votre disponibilité..
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
344
10 mars 2014 à 10:35
10 mars 2014 à 10:35
Bonjour,
J'ai édité ton message pour y mettre les balises de code
Merci d'y penser dans tes prochains messages.
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
J'ai édité ton message pour y mettre les balises de code
Merci d'y penser dans tes prochains messages.
http://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
ksomda
Messages postés
36
Date d'inscription
lundi 17 février 2014
Statut
Membre
Dernière intervention
2 septembre 2016
10 mars 2014 à 12:16
10 mars 2014 à 12:16
Je te pries de bien vouloir m'excuser j'y penser dans mes prochains messages.Merci pour la remarque