Modales Jquery-Dialogfeld bei Klickereignis öffnen

Question 1

Der folgende Code funktioniert nur für das erste Klickereignis. Bei jedem weiteren Klick passiert jedoch nichts. Ich habe dies auf Firefox getestet, dh7, aber immer noch dasselbe. Übersehe ich etwas?

<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>

Question 2

Versuchen

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

Im letzten Teil gibt es ein offenes Argument

Question 3

Versuche dies

    $(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
});

Und im HTML-Format

<h3 id="clickMe">Open dialog</h3>
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea>

Question 4

$(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
});

Verwenden Sie besser .hide() anstelle von .remove(). Mit .remove() gibt es undefiniert zurück, wenn Sie den Link einmal gedrückt haben, dann schließen Sie das Modal und wenn Sie den modalen Link erneut drücken, gibt es mit .remove undefiniert zurück.

Mit .hide() tut es das nicht und es funktioniert wie ein Kinderspiel. Ty für den Ausschnitt aus erster Hand!

Question 5

Wenn Sie eine Seite in den Dialog einfügen möchten, können Sie diese verwenden

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>

Question 6

Kann hilfreich sein… 🙂

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

Question 7

Versuchen Sie, diese Zeile vor Ihrer Dialogzeile einzufügen.

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

Diese Methode hat bei mir funktioniert. Es scheint, dass der Befehl “Schließen” das erneute Öffnen des Dialogs mit nur dem .dialog() durcheinander bringt.

Wenn Sie Ihren Code als Beispiel verwenden, würde dies so aussehen (beachten Sie, dass Sie möglicherweise mehr zu Ihrem Code hinzufügen müssen, damit er Sinn ergibt):

    <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>