JQuery UI: Für Modal, wollen verschiedene Animationen, wenn OK vs Abbrechen Schaltfläche gedrückt wird

Question

Ich möchte den Dialog in, aber variieren Sie die Animation abhängig davon, ob die OK oder die Schaltfläche Abbrechen gedrückt wird. Wenn die OK-Taste gedrückt wird, möchte ich FadeOut, sonst Explode.

Können Sie mir helfen, meinen vorhandenen Code zu ändern, um dies zu tun?

function confirmCancelReadyToRun(link, vendorId, runYearMonthDate, runYearMonthDisplay) { 

    var $myDialog = $("<div></div>") 
      .html("Are you sure that you want to Cancel the Ready to Run for Vendor ID " + vendorId + " on " + runYearMonthDisplay + "?") 
      .dialog({ 
       modal: true, 
       autoOpen: false, 
       show: "fade", 
       title: "Confirm Cancel", 
       my: "center", 
       at: "center", 
       of: window, 
       buttons: { 
        "Cancel": function() { 
         $(this).dialog("close"); 
         return false; 
        }, 
        "OK": function() { 
         $(this).dialog("close"); 
         var form = $(link).parents("form:first"); 
         var actionString = encodeURI(CorrectUrl("/ReadyToRun/CancelReadyToRun?vendorId=" + vendorId + "&runYearMonthDate=" + runYearMonthDate)); 
         form.attr("action", actionString); 
         form[0].submit(); 
         return true; 
        } 
       } 
      }); 

    $myDialog.dialog("open"); 
} 

Answer 1

einfach die Option ändern für hide kurz bevor Sie den Dialog zu schließen (oder an dem Punkt, Sie wissen, welche Wirkung Sie wollen):

function confirmCancelReadyToRun(link, vendorId, runYearMonthDate, runYearMonthDisplay) { 
 

 
    var $myDialog = $("<div></div>") 
 
    .html("Are you sure that you want to Cancel the Ready to Run for Vendor ID " + vendorId + " on " + runYearMonthDisplay + "?") 
 
    .dialog({ 
 
     modal: true, 
 
     autoOpen: false, 
 
     show: "fade", 
 
     title: "Confirm Cancel", 
 
     my: "center", 
 
     at: "center", 
 
     of: window, 
 
     buttons: { 
 
     "Cancel": function() { 
 
      $(this).dialog("option", "hide", "explode"); 
 
      $(this).dialog("close"); 
 
      return false; 
 
     }, 
 
     "OK": function() { 
 

 
      $(this).dialog("option", "hide", "fade"); 
 
      $(this).dialog("close"); 
 

 
      //var form = $(link).parents("form:first"); 
 
      //var actionString = encodeURI(CorrectUrl("/ReadyToRun/CancelReadyToRun?vendorId=" + vendorId + "&runYearMonthDate=" + runYearMonthDate)); 
 
      //form.attr("action", actionString); 
 
      //form[0].submit(); 
 
      return true; 
 
     } 
 
     } 
 
    }); 
 

 
    $myDialog.dialog("open"); 
 
} 
 

 
confirmCancelReadyToRun("thing", "1000020", 5, 2016);

<link href="https://code.jquery.com/ui/1.12.0/themes/cupertino/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>