2010-05-29 9 views
54

Wie schließe ich den jQuery-Dialog innerhalb des Dialogs ohne die Schließen-Schaltfläche?Wie wird der jQuery Dialog innerhalb des Dialogs geschlossen?

Innerhalb des ui-Dialogfelds befindet sich eine einfache Formularanforderung. Wenn eine erfolgreiche Übermittlung erfolgt, schließt das ui-Dialogfeld automatisch und aktualisiert die übergeordnete Seite.

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#form-dialog").dialog({ 
       autoOpen: true, 
       modal: true, 
       width: 200, 
       draggable: true, 
       resizable: true 
      }); 
     }); 
    </script> 


    <div id="form-dialog" title="Form Submit"> 
    <form action="default.aspx" method="post"> 
    <input type="text" name="name" value=" " />  
    <input type="submit" value="submit" /> 

    <a href="#" id="btnDone">CLOSE</a> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#btnDone").click(function() { 
      $(this).dialog('close'); 
     }); 
    }); 
    </script> 

    </form> 
    </div> 

-imperialx

Antwort

51

Sie können es durch den Aufruf

$('#form-dialog').dialog('close') 

programmatisch schließen, wann immer Sie wollen.

+0

Aber das Formular-Tag befindet sich in der UI-Dialog. Keine jquery-Dateien innerhalb des ui-Dialogs, nur eine einfache Formular-Tag-Übermittlung. Wie kann ich den $ ('# form-dialog'). Close() im # form-dialog benutzen? Es ist so, als würde man sich selbst schließen, nachdem man auf etwas geklickt hat, oder es tritt ein Warte-Timer im Dialog auf. – imperialx

+0

Wenn Sie jQuery verwenden, um den Dialog zu öffnen, können Sie ihn mit jquery schließen. In der Zeile rechts unten, wo Sie den Dialog deklarieren, setzen Sie '$ ('# mySubmitButton') live ('click', function() {mySubmitFunction(); $ ('# form-dialog'). close();}); ' – Jason

+0

Ja, aber wie wäre es, wenn ich im Dialog bin? Ich denke, das Äquivalent davon ist etwas wie $ (window) .unload(), wobei das Popup-Formular sich selbst automatisch schließt, anstatt auf die Schaltfläche zum Schließen von jquery-ui-dialog zu klicken. – imperialx

14

Sie benötigen

$('selector').dialog('close'); 
+0

Hallo redsquare, ich habe ein paar Zeilen auf meinem Code oben, darf ich wissen, warum es den Dialog nicht schließen? Wie Sie sehen können, befindet sich die Schließen-Schaltfläche im ui-Dialog. Vielen Dank. – imperialx

+0

weil in Ihrem Fall bezieht sich dies auf die Schaltfläche nicht das Dialogfeld – redsquare

+0

ändern $ (this) zu $ ​​("# form-dialog") – redsquare

0

     $(document).ready(function() { 
      $("#form-dialog").dialog({ 
       autoOpen: true, 
       modal: true, 
       width: 200, 
       draggable: true, 
       resizable: true, 
       buttons: { 
        "Close": function() { 
         $("#idDialog").dialog("close"); 
        } 
       } 
      }); 
     }); 

Dadurch werden Sie auf eine Schaltfläche machen zu schließen. Sie können auch die Funktion in der Nähe

in einer Funktion aufrufen, um dies zu tun. oder sogar in einem Knopf/a

< a href="javascript:void(0);" id="btnDone" 
           onClick="$("#idDialog").dialog("close");">CLOSE</a> 

EDIT: müssen Sie dies Ihren Dialog in Form enthalten:

open: function (type, data) { 
      $(this).parent().appendTo($("form:first")); 
     } 
59

Probieren Sie diese

$(this).closest('.ui-dialog-content').dialog('close'); 

Es wird den Dialog schließen im Inneren.

+1

ausgezeichnet. genau was ich wollte! – Somedeveloper

2

einen String ersetzen

$("#form-dialog").dialog('close'); 

$ (this) bedeutet hier ein anderes Objekt $ ("# btnDone")

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#form-dialog").dialog({ 
      autoOpen: true, 
      modal: true, 
      width: 200, 
      draggable: true, 
      resizable: true 
     }); 
    }); 
</script> 


<div id="form-dialog" title="Form Submit"> 
<form action="default.aspx" method="post"> 
<input type="text" name="name" value=" " />  
<input type="submit" value="submit" /> 

<a href="#" id="btnDone">CLOSE</a> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#btnDone").click(function() { 
//I've replaced next string 
// $(this) here means another object $("#btnDone") 
    $("#form-dialog").dialog('close'); 
    }); 
}); 
</script> 

</form> 
</div> 
6
$(this).parents(".ui-dialog-content").dialog('close') 

Einfach, wie ich sicher, dass ich ‚machen don t:

  1. hardcode dialog # id werte.
  2. Schließen Sie alle Dialoge.
0

Addiert man diese Verbindung in der offenen

$(this).parent().appendTo($("form:first")); 

funktioniert perfekt.

6

Schließen von iframe in einem Dialog:

window.parent.$('.ui-dialog-content:visible').dialog('close'); 
3

Nach all diesen Antworten oben ohne Glück Überprüfung der Folling Code für mich gearbeitet, das Problem zu lösen:

$(".ui-dialog").dialog("close"); 

Vielleicht wird dies sein Auch ein guter Versuch, wenn Sie nach Alternativen suchen.

Verwandte Themen