jQuery UI Dialog pas l'ouverture d'un second temps
Je suis en utilisant jqueryui pour une boîte de dialogue. En cliquant sur " Cliquez pour un modal lien la première fois des œuvres. Lorsque vous appuyez sur le ESC clé, la boîte de dialogue disparaît. Mais les clics après qui ne fonctionnent pas. Je veux que ceux de travail. L'actualisation de la page rend tout est OK.
HTML:
<a href="" class="click_me" style="font-size:15px;"> Click for a modal</a><br />
<div class="demo" ">
<div id="dialog" title=" Upload Your Profile Picture" style="border1111:1px solid red; width:640px;">
this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is this is
</div><!-- end of id dialog -->
</div><!-- End demo -->jQuery extrait de:
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".click_me").bind('click', function (e) {
e.preventDefault();
$("#dialog").css('border', '5px solid #848484');
$("#dialog").dialog({
width: 460
});
//$( "#dialog" ).dialog( "option", "height", 180 );
});
$("body").bind("keyup#dialog", function (event) {
//27 == "esc"
if (event.which == 27) {
//TODO: close the dialog
//unbind the event
$("body").unbind("keyup.myDialog");
}
});
});
</script> Comment puis-je faire plusieurs clics de travail?
- Aucune explication quant à pourquoi les moins de notation a été donnée ? Jetez un oeil à la conversation entre PPvG et moi.. le problème est toujours pas résolu
- Je pense que votre question a été voté, parce qu'il a été répondu, mais vous avez posé une nouvelle question dans les commentaires. Pro astuce: avoir un coup d'oeil à Comment Demander avant de poser votre question suivante.
Vous devez vous connecter pour publier un commentaire.
Quatre choses.
Tout d'abord, si la boîte de dialogue devrait être réutilisable, vous aurez envie de créer avant le premier clic à l'ensemble de la
autoOpenoption pourfalse. Pour ouvrir la boîte de dialogue, vous devez utiliserdialog('open').Par exemple:
Noter que j'ai créer un
var dialogpour enregistrer$('#dialog'). C'est plus efficace, parce que sinon, jQuery faudrait chercher#dialogplusieurs fois dans le même morceau de code.Deuxièmement, vous avez une erreur dans votre code HTML: il y a une citation de trop nombreux ici:
Cela pourrait provoquer un comportement inattendu dans certains navigateurs (mais pas tous), ce qui le rend difficile à déboguer. Supprimer les devis.
Troisièmement, si je me souviens bien, jQuery Dialogue de l'INTERFACE utilisateur prend en charge la
ESCclé, de sorte que vous n'avez pas à le faire vous-même. Si vous voulez faire autre chose que de fermer la boîte de dialogue lorsque exscape est pressé, en fait, vous devez utiliser la boîte de dialoguebeforeCloseévénement. Si tout ce que vous voulez faire est de fermer la boîte de dialogue; vous êtes tous ensemble. 🙂Et enfin, il est recommandé de ne pas utiliser des styles en ligne. Ainsi, au lieu de cela:
Créer un fichier CSS avec les éléments suivants:
Vous pouvez faire de même pour
#dialog, y compris à la frontière, vous êtes maintenant l'application avec JavaScript:Espère que cette aide.
Voici un exemple de travail qui s'applique les quatre points que j'ai mentionnés: http://jsfiddle.net/PPvG/yHTJw/
Noter que le jQuery UI styles sont manquantes, de sorte que le dialogue est un peu moche. 🙂
Pour assurer le Dialogue fonctionne comme prévu, assurez-vous que vous utilisez les dernières versions de jQuery et jQuery UI et que vous incluez un Thème jQuery UI.
Voici un exemple où tout est chargé par Google CA:
De les inclure dans la
<head>de votre code HTML. Le résultat devrait ressembler à comme ceci. Si cela ne fonctionne pas, vous pouvez essayer un certain nombre de choses:file://non par l'intermédiaire delocalhost).Si aucun de ces travaux, je suis désolé de le dire, mais... "vous le faites mal". 😛
Noter que l'extrait ci-dessus comprendra la valeur par défaut de jQuery UI thème "de base". Si elle ne correspond pas à vos besoins, vous pouvez utiliser Google CA pour quelques autres thèmes par défaut (voir ce blog), ou vous pouvez créer votre propre thème à l'aide de ThemeRoller.
Edit:
Assurez-vous que la boîte de Dialogue conserve l'accent (et donc est fermé lorsque l'utilisateur appuie sur
ESC, même si l'utilisateur a cliqué quelque part sur la page), essayez de définirmodalvrai:jsFiddle: http://jsfiddle.net/PPvG/yHTJw/3/
Normalement, l'utilisateur peut interagir avec d'autres éléments de la page (et, par conséquent, ces éléments peuvent saisir le focus à partir de la boîte de Dialogue). Lorsque le
modaloption est définie àtrue, l'utilisateur ne peut plus iteract avec le reste de la page et de la boîte de Dialogue de garder le focus n'importe quoi.Espère que cette aide.
<script>URL pour pointer vers des versions locales de jQuery et jQuery UI.file://) et lors de la visualisation via un httpd surlocalhost. Donc c'est probablement un problème de configuration sur votre fin. Remarque: quand je dis que ça fonctionne parfaitement, je veux dire qu'il y a un de travail, mais non stylé lien "étroit". Pas un bouton. C'est parce que vous avez encore à choisir et charger un thème.modalàtrue. Voir mon dernier edit.modalàtrue" et de dans le jsFiddle.essayez d'utiliser
$("#dialog").close();au lieu de$("body").unbind("keyup.myDialog");essayez d'utiliser $(this).la boîte de dialogue("détruire"); au lieu de $(this).la boîte de dialogue("fermer");