Comment créer une boîte de dialogue à partir de jQuery uniquement après avoir appuyé sur un bouton?
Question
Ce code provient de la démonstration de confirmation modale sur le site jQuery.
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
resizable: false,
height:140,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Yes': function() {
$(this).dialog('close');
},
'No': function() {
$(this).dialog('close');
}
}
});
});
</script>
<div class="demo">
<div id="dialog" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
<p>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->
Quelqu'un peut-il me dire comment faire cette émission uniquement après avoir appuyé sur un bouton? Pour le moment, il apparaît automatiquement dans la page juste après le chargement.
La solution
Vrai ou faux, voici un exemple tiré d'une boîte de dialogue générique de style d'alerte que j'utilise:
Configurer le dialogue (dans le document prêt):
$("#generic-dialog").dialog({
autoOpen: false,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
Et ouvrez le dialogue (après un événement):
$("#generic-dialog")
.text("Status updated successfully.")
.dialog("option", "title", "Your Status").dialog("open");
Autres conseils
Ajoutez le bouton à la page et ajoutez le code à l'événement click du bouton.
<script type="text/javascript">
$(function() {
$("#button").click(function(){
$("#dialog").dialog({
bgiframe: true,
resizable: false,
height:140,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Yes': function() {
$(this).dialog('close');
},
'No': function() {
$(this).dialog('close');
}
}
});
});
});
</script>
et en HTML
<input type='button' value="click" id="button"/>
$("#btnTest").click(function() {
$('#dialog').dialog('open');
return false;
})
Cela devrait ouvrir la boîte de dialogue que vous avez définie - associe la fonction d'ouverture de la boîte de dialogue permettant de cliquer sur l'événement du bouton
Oh - et définissez autoOpen: false
dans les propriétés de configuration de la boîte de dialogue:)