web-dev-qa-db-fra.com

Ouvrir la boîte de dialogue modale Jquery sur l'événement click

Le code ci-dessous ne fonctionne que pour l'événement du premier clic. Cependant, pour les clics ultérieurs, rien ne se passe ... J'ai testé cela sur Firefox, c'est-à-dire7 mais toujours le même. Est-ce que je manque quelque chose? 

<script type="text/javascript">
$(document).ready(function() {
    //$('#dialog').dialog();
    $('#dialog_link').click(function() {
        $('#dialog').dialog();
        return false;
    });
});
</script>    
</head><body>
   <div id="dialog" title="Dialog Title" style="display:none"> Some text</div>  
   <p id="dialog_link">Open Dialog</p>  
</body></html>
jquerymodal-dialog
21
Sumanta

essayer

$(document).ready(function () {
    //$('#dialog').dialog(); 
    $('#dialog_link').click(function () {
        $('#dialog').dialog('open');
        return false;
    });
});

il y a un argument ouvert dans la dernière partie

28
almog.ori

Essaye ça

    $(function() {

$('#clickMe').click(function(event) {
    var mytext = $('#myText').val();


    $('<div id="dialog">'+mytext+'</div>').appendTo('body');        
    event.preventDefault();

        $("#dialog").dialog({                   
            width: 600,
            modal: true,
            close: function(event, ui) {
                $("#dialog").remove();
                }
            });
    }); //close click
});

Et en HTML 

<h3 id="clickMe">Open dialog</h3>
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea>
12
TigerTiger
$(function() {

$('#clickMe').click(function(event) {
    var mytext = $('#myText').val();

    $('<div id="dialog">'+mytext+'</div>').appendTo('body');        
    event.preventDefault();

        $("#dialog").dialog({                   
            width: 600,
            modal: true,
            close: function(event, ui) {
                $("#dialog").hide();
                }
            });
    }); //close click
});

Mieux vaut utiliser .hide () au lieu de .remove (). Avec .remove (), il retourne undefined si vous avez appuyé une fois sur le lien, fermez le modal et si vous appuyez à nouveau sur le lien modal, il retourne undefined avec .remove.

Avec .hide () ça ne marche pas et ça marche comme une brise. Ty pour l'extrait dans la première main!

5
Lucas Welander

Si vous voulez mettre une page dans la boîte de dialogue, vous pouvez utiliser ces 

function Popup()
{
 $("#pop").load('login.html').dialog({
 height: 625,
 width: 600,
 modal:true,
 close: function(event,ui){
     $("pop").dialog('destroy');

        }
 }); 

}

HTML:

<Div id="pop"  style="display:none;">

</Div>
2
Rahul Kumar

Peut être utile ... :) 

$(document).ready(function() {
    $('#buutonId').on('click', function() {
        $('#modalId').modal('open');
    });
});
1
Kalpesh Desai

Essayez d'ajouter cette ligne avant votre ligne de dialogue.

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

Cette méthode a fonctionné pour moi. Il semble que la commande "close" gâche l'ouverture de la boîte de dialogue avec seulement le fichier .dialog ().

En utilisant votre code comme exemple, cela irait comme ceci (notez que vous devrez peut-être ajouter plus de code à votre code pour que cela ait un sens):

    <script type="text/javascript">
$(document).ready(function() {
    //$('#dialog').dialog();
    $('#dialog_link').click(function() {
$( "#dialog" ).dialog( "open" );        
$('#dialog').dialog();
        return false;
    });
});
</script>    
</head><body>
   <div id="dialog" title="Dialog Title" style="display:none"> Some text</div>  
   <p id="dialog_link">Open Dialog</p>  
</body></html>
0
dwlorimer