Question

我只需要停止执行功能，直到用户在对话框中确认OK或CANCEL为止。如果用户单击“确定”，则应继续执行。.如果用户单击“取消”，则应停止执行。我怎样才能做到这一点？

下面是我的代码：

function Verifivation() {
var messages = ['Custmer and Client is from Diff City'];
            var OKFunction = function () {
                $('#MessagesDialog').remove();
                return true;
            };
            var cancelFunction = function () {
                $('#MessagesDialog').remove();

            };
            createMessageDialog("Verification", "ReceptPage", messages, ["OK", "Cancel"], [OKFunction, cancelFunction], function () { }, null, null, getConfirmHandler);

}
function createMessageDialog(title, parentid, messages, buttonLabels, buttonFunctions, functPartialLoad, top, isModal, closeCallback) {
    if (top == null || top == '') top = 80;
    if (isModal == null) isModal = true;
    var openFunc = function () {
        if (typeof messages == "object") {
            if (messages.length > 0) {
                for (var i = 0; i < messages.length; i++) {
                    $("#messages").append("<span>" + messages[i] + "</span><br/>");
                }
            }
        } else if (typeof messages == "string") {
            $("#messages").append("<span>" + messages + "</span><br/>");
        }

        if ((buttonLabels.length > 0) && (buttonFunctions.length > 0) && (buttonLabels.length == buttonFunctions.length)) {
            for (var i = 0; i < buttonLabels.length; i++) {
                if (i == 0) {
                    $("#messageBtn").append("<button type='button' value='" + buttonLabels[i] + "'class='button green' id='" + buttonLabels[i].trim().replace(" ", "") + "Btn'><i class='fas fa-check-circle' style='margin-right: 3px !important'></i>" + buttonLabels[i].trim().replace(" ", "") + "</button>&nbsp;&nbsp;");
                }
                else {
                    $("#messageBtn").append("<button type='button' value='" + buttonLabels[i] + "'class='button orange' id='" + buttonLabels[i].trim().replace(" ", "") + "Btn'><i class='fas fa-times-circle' style='margin-right: 3px !important'></i>" + buttonLabels[i].trim().replace(" ", "") + "</button>&nbsp;&nbsp;");
                }
                $("#" + buttonLabels[i].trim().replace(" ", "") + "Btn").click(buttonFunctions[i]);
            }
        }
        functPartialLoad();
    };
    $("#" + parentid).append('<div id="MessagesDialog" title="' + title + '" style="display: none"><div id="messages"></div><div id="partialContent"></div><div id="messageBtn" style="margin-top: 5px; text-align:center;"></div></div>');
    $("#MessagesDialog").dialog({
        autoOpen: true,
        heigt: 500,
        width: 500,
        position: ['top', top],
        modal: isModal,
        close: function (event, ui) {
            $(this).remove();
            if (closeCallback)
                closeCallback();
        },
        open: openFunc
    })
}

Answer 1

  function openDialog() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "OK": function() {
          $( this ).dialog( "close" );
          executeNow();
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  }
  function executeNow(){
    console.log("I am executing");
  };

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Modal confirmation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="dialog-confirm" title="Empty the recycle bin?" style="display:none;">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
 
<p onclick="openDialog()">click me to open dialog</p>
 
 
</body>
</html>

如何在对话框中确认用户之前停止执行jq函数？

1 个答案: