2016-08-01 23 views
2

Mein Code etwas wie das ist:Wie ein Popup JQuery Dialog öffnen, wenn Checkbox geklickt wird und Wiederherstellen-Schaltfläche geklickt wird

function ShowPopUpRestore() { 
     var returnval = 1; 
     var hddnField = document.getElementById(<%=hdnSelectedRows.ClientID%>"); 
     if (hddnField.value != 0) { 
      returnVal = 0; 
      $('<div></div>').appendTo('body') 
           .html('<div><align="left"> </br>' + '<%= this.GetMessage("Msg1595")%>' + '</h6></div>') 
           .dialog({ 
            resizable: false, 
            modal: true, 
            title: "", 
            height: 150, 
            width: 475, 
            buttons: { 
             Yes: function() { 
              // //__doPostBack(mDdlSurgeryListRE.name, ''); 

              $(this).dialog("close"); 
             }, 
             "No": function() {           

              $(this).dialog('close'); 
             } 
            }, 
            close: function (event, ui) { 
             $(this).remove(); 
            } 
           }).prev(".ui-dialog-titlebar").css("background", "#4E2D1D"); 
          }        
        return false; 
    } 

Es sei eine meiner Daten in angehaltenem Modus und ich möchte es in aktiv sein Modus, also versuche ich es wiederherzustellen, indem ich auf den Wiederherstellungsbutton klicke.

  • Wenn ich die Daten mit ‚Ja‘, dann klicken Sie auf: Wenn ich auf das Kontrollkästchen am klicken und versuchen, auf die Restore-Taste klicken, erscheint ein Pop-up sollte ein ‚Ja‘/‚Nein‘ Taste kommen mit das überprüft wird, wird zurück in den aktiven Modus wiederhergestellt.
  • Wenn ich auf "Nein" klicke, sollte es im Suspend-Modus bleiben.

Es kann für mehrere Kontrollkästchen (Daten) gültig sein. Vielen Dank.

Antwort

1

Es ist wirklich einfach nur die folgenden Ereignisse in jQuery erstellen und binden sie ShowPopUpRestore() aufzurufen:

  1. Für die Restore-Taste ein click() Ereignis erstellen.
  2. Für das Kontrollkästchen erstellen Sie ein change() Ereignis.

Komplettes Beispiel:

<head runat="server"> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"> 
    <script type="text/javascript"> 
     $(function() { 

      $("#btnRestore").click(function() { 
       ShowPopUpRestore(); 
      }); 

      $("#chkBtn").change(function() { 
       ShowPopUpRestore(); 
      }); 

      function ShowPopUpRestore() { 
       var returnval = 1; 
       var hddnField = document.getElementById("<%=hdnSelectedRows.ClientID%>"); 
       if (hddnField.value != 0) { 
        returnVal = 0; 
        $('<div></div>').appendTo('body').html('<div><align="left"></br>' + '<%= this.GetMessage("Msg1595")%>' + '</h6></div>') 
            .dialog({ 
             resizable: false, 
             modal: true, 
             title: "", 
             height: 150, 
             width: 475, 
             buttons: { 
              Yes: function() { 
               $(this).dialog("close"); 
               alert('You clicked YES'); 
              }, 
              "No": function() { 
               $(this).dialog('close'); 
               alert('You clicked NO'); 
              } 
             }, 
             close: function (event, ui) { 
              $(this).remove(); 
             } 
            }).prev(".ui-dialog-titlebar").css("background", "#4E2D1D"); 
       } 
       return false; 
      } 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <input type="button" id="btnRestore" value="Restore" /> 
     <input type="checkbox" id="chkBtn" value="Check box" /> 
     <asp:HiddenField ID="hdnSelectedRows" runat="server" Value="1" /> 
    </form> 
</body> 
+0

, wenn ich auf die Schaltfläche wiederherstellen bin klicken, dann Pop-up kommt und geht innerhalb kürzester Zeit. es wartet nicht oder erlaubt es dem Benutzer, auf "Ja"/"Nein" zu klicken. –

+0

Dann gibt es eine zusätzliche Logik in Ihrer Webseite, die das Popup sofort schließt. Kopieren Sie den Code, den ich gepostet habe, mit keine zusätzliche Logik und Sie werden sehen, dass es funktioniert. Dann, wenn es langsam arbeitet, starten Sie den Rest des Codes zurück auf die Webseite –

+0

Hallo Denis, ich habe versucht, das, aber es funktioniert nicht.Es gibt eine alternative Lösung für dieses Problem. –