javascript - 单击“确定”后，从自定义确认框中返回 true

Question

On the first buton click i am validating certain text boxes and then calling Confirm() to show confirmation box.I want that to return true to the calling function when ok is clicked and the control should go back to UI to proceed further.But this is not happening.It stays on the same page

<小时/>

function ValidateDetailsForItemUPC() {
  var retvalue = true;    
  if (retvalue)
    retvalue=Confirm('Go to Google', 'Are you sure you want to visit Google', 'Yes', 'Cancel', "https://www.google.com.eg"); /*change*/   
  return retvalue;    
}

function Confirm(title, msg, $true, $false, $link) { /*change*/
  var retvalue = false;
  var $content = "<div class='dialog-ovelay'>" +
                "<div class='dialog'><header>" +
                 " <h3> " + title + " </h3> " +
                 "<i class='fa fa-close'></i>" +
             "</header>" +
             "<div class='dialog-msg'>" +
                 " <p> " + msg + " </p> " +
             "</div>" +
             "<footer>" +
                 "<div class='controls'>" +
                     " <button class='button button-danger doAction'      onclick='return OkClick()'>" + $true + "</button> " +
                     " <button class='button button-default cancelAction'>" + $false + "</button> " +
                 "</div>" +
             "</footer>" +
          "</div>" +
        "</div>";
$('body').prepend($content);

$('.cancelAction, .fa-close').click(function () {
    $(this).parents('.dialog-ovelay').fadeOut(500, function () {
        $(this).remove();
    });
    retvalue = false;
});
return retvalue
}
function OkClick()
{
  alert("true");            
}

Html code
 <div id="dialog-confirm" title="ALERT 01">
            <p style="text-align:center;"><span class="ui-icon ui-icon-alert" style="display:inline-block; margin:0px 7px 0px 0px;"></span>Are you sure?</p>
</div> 

Answer 1

看看我的基于 ES6 Promise 的解决方案。希望这会有所帮助。

function ValidateDetailsForItemUPC() {
    Confirm('Go to Google', 'Are you sure you want to visit Google', 'Yes', 'Cancel', "https://www.google.com.eg")
        .then(() => {
            alert('user clicked yes');
            // Redirect to another page here
            // ...
        })
        .catch(() => {
            alert('user clicked cancel');
        });
}

function Confirm(title, msg, $true, $false, $link) {
    var $content = "<div class='dialog-ovelay'>" +
                "<div class='dialog'><header>" +
                 " <h3> " + title + " </h3> " +
                 "<i class='fa fa-close'></i>" +
             "</header>" +
             "<div class='dialog-msg'>" +
                 " <p> " + msg + " </p> " +
             "</div>" +
             "<footer>" +
                 "<div class='controls'>" +
                     " <button class='button button-danger doAction'>" + $true + "</button> " +
                     " <button class='button button-default cancelAction'>" + $false + "</button> " +
                 "</div>" +
             "</footer>" +
          "</div>" +
        "</div>";
    $('body').prepend($content);

    return new Promise((resolve, reject) => {
        $('.doAction').click(function() {
            $(this).parents('.dialog-ovelay').remove();
            resolve();
        });

        $('.cancelAction, .fa-close').click(function () {
            $(this).parents('.dialog-ovelay').fadeOut(500, function () {
                $(this).remove();
                reject();
            });
        });
    });
}

ValidateDetailsForItemUPC();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>