J'ai la div suivante:
<div id="divAlert">
<div id='divAlertText'>You must select a language.</div>
<div id='divAlertButton' class='btn blue' onclick="HideAlert();">Ok</div>
</div>
Est cette page HTML, il y a plus de divs et de boutons. Je veux afficher divAlert
comme une fenêtre contextuelle modale.
Je sais qu'il y a quelque chose dans jQuery, je pense, que je peux utiliser pour montrer mon div avec un fond noir à moitié transparent remplissant toute la page. Mais je ne me souviens pas de son nom.
Aucun conseil?
vous pouvez utiliser le widget de dialogue jquery
Une simple boîte de dialogue ou une boîte de dialogue pop-up modale peut être effectuée par les propriétés CSS et un peu de jQuery. L'idée de base est simple:
Nous avons donc besoin de trois divisions:
Définissons d'abord le CSS:
#hider
{
position:absolute;
top: 0%;
left: 0%;
width:1600px;
height:2000px;
margin-top: -800px; /*set to a negative number 1/2 of your height*/
margin-left: -500px; /*set to a negative number 1/2 of your width*/
/*
z- index must be lower than pop up box
*/
z-index: 99;
background-color:Black;
//for transparency
opacity:0.6;
}
#popup_box
{
position:absolute;
top: 50%;
left: 50%;
width:10em;
height:10em;
margin-top: -5em; /*set to a negative number 1/2 of your height*/
margin-left: -5em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
border: 2px solid black;
z-index:100;
}
Il est important que nous définissions le z-index de notre div caché plus bas que la boîte pop_up car nous voulons afficher popup_box en haut.
Voici le script Java:
$(document).ready(function () {
//hide hider and popup_box
$("#hider").hide();
$("#popup_box").hide();
//on click show the hider div and the message
$("#showpopup").click(function () {
$("#hider").fadeIn("slow");
$('#popup_box').fadeIn("slow");
});
//on click hide the message and the
$("#buttonClose").click(function () {
$("#hider").fadeOut("slow");
$('#popup_box').fadeOut("slow");
});
});
Et enfin le HTML:
<div id="hider"></div>
<div id="popup_box">
Message<br />
<a id="buttonClose">Close</a>
</div>
<div id="content">
Page's main content.<br />
<a id="showpopup">ClickMe</a>
</div>
J'ai utilisé jquery-1.4.1.min.js www.jquery.com/download et testé le code dans Firefox. J'espère que cela t'aides.