popup de dialog jQuery

J’essaie de faire apparaître ce formulaire popup de dialog lorsque ce lien est cliqué, mais cela ne fonctionne pas pour moi. J’y travaille depuis trois heures et cela devient trop frustrant pour moi.

Voici mon HTML:

Contact Us 

appear now

Et voici mon JavaScript, c’est dans un fichier externe:

 $("#contactUs").click(function() { $("#dialog").dialog("open"); return false; }); 

J’ai utilisé ces liens, mais en vain pour moi:

  • http://jqueryui.com/demos/dialog/#modal
  • http://jqueryui.com/demos/dialog/#default

S’il vous plaît laissez-moi savoir si vous avez une idée, très appréciée, merci.

Ce code HTML convient:

 Contact Us 

appear now

Vous devez initialiser le dialog (vous n’êtes pas sûr de le faire):

 $(function() { // this initializes the dialog (and uses some common options that I do) $("#dialog").dialog({ autoOpen : false, modal : true, show : "blind", hide : "blind" }); // next add the onclick handler $("#contactUs").click(function() { $("#dialog").dialog("open"); return false; }); }); 

Votre problème est sur l’appel pour le dialog

Si vous n’initialisez pas le dialog, vous n’avez pas besoin de passer “open” pour afficher:

 $("#dialog").dialog(); 

En outre, ce code doit être sur un $(document).ready(); fonction ou être en dessous des éléments pour que cela fonctionne.

Utilisez ci-dessous Code, cela a fonctionné pour moi.

  

C’est assez simple, le premier HTML doit être ajouté:

 

Ensuite, il doit être initialisé:

  

Après cela, vous pouvez le montrer par code:

 jQuery( '#dialog' ).dialog( 'open' ); 

Vous pouvez utiliser le script suivant. Ça a fonctionné pour moi

Le modal lui-même comprend un conteneur modal principal, un en-tête, un corps et un pied de page. Le pied de page contient les actions, qui dans ce cas sont le bouton OK, l’en-tête contient le titre et le bouton de fermeture, et le corps contient le contenu modal.

  $(function () { modalPosition(); $(window).resize(function () { modalPosition(); }); $('.openModal').click(function (e) { $('.modal, .modal-backdrop').fadeIn('fast'); e.preventDefault(); }); $('.close-modal').click(function (e) { $('.modal, .modal-backdrop').fadeOut('fast'); }); }); function modalPosition() { var width = $('.modal').width(); var pageWidth = $(window).width(); var x = (pageWidth / 2) - (width / 2); $('.modal').css({ left: x + "px" }); } 

Référez-vous: – Popup modal utilisant jquery dans asp.net

Vous pouvez vérifier ce lien: http://jqueryui.com/dialog/

Ce code devrait fonctionner correctement

 $("#dialog").dialog();