web-dev-qa-db-fra.com

popup de dialogue jQuery

J'essaie de faire apparaître ce formulaire contextuel de dialogue 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:

<a href="#" id="contactUs">Contact Us</a>
<div id="dialog" title="Contact form">
  <p>appear now</p>
</div>

Et voici mon JavaScript, cela se trouve dans un fichier externe: 

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

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

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

jqueryjquery-uimodal-dialogjquery-ui-dialog
20
rj2700

Ce code HTML convient:

<a href="#" id="contactUs">Contact Us</a>                   
<div id="dialog" title="Contact form">
  <p>appear now</p>
</div>

Vous devez initialiser le dialogue (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;
  });
});
40
Andy Jones

Votre problème est sur l'appel pour le dialogue

Si vous n'initialisez pas le dialogue, vous n'avez pas besoin de passer "open" pour afficher:

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

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

7
rcdmk

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

<script type="text/javascript">
     $(document).ready(function () {
            $('#dialog').dialog({
                autoOpen: false,
                title: 'Basic Dialog'
            });
            $('#contactUs').click(function () {
                $('#dialog').dialog('open');
            });
        });
</script>
4
Mohit Sharma

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

<div id="dialog"></div>

Ensuite, il doit être initialisé:

<script type="text/javascript">
  jQuery( document ).ready( function() {
    jQuery( '#dialog' ).dialog( { 'autoOpen': false } );
  });
</script>

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

jQuery( '#dialog' ).dialog( 'open' );
3
Michael Martin

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" });
    }

Voir: - Modal popup utilisant jquery dans asp.net

1
Rameshbl

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

Ce code devrait fonctionner correctement

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