单击确定时，从自定义确认框中返回true

Question

在第一个按钮上，我正在验证某些文本框，然后调用Confirm（）以显示确认框。我希望在单击ok时将其返回true到调用函数，并且控件应返回UI进行进一步操作。没有发生。它停留在同一页上

---

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 Promises的解决方案。 希望这可以帮助。

 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> 

Answer 2

您提供的代码似乎不完整。 但是用你所拥有的东西，你应该做些类似的小提琴。

https://jsfiddle.net/tinkersncody/k28usg8q/1/

 <input id="validateRequest" type="button" value="validate" />

$('#validateRequest').on('click.validate',function(){
    return va();
});


function va(){
    if (retvalue){ retvalue=
        Confirm('Go to Google', 'Are ... Google', 'Yes', 'Cancel', "https://www.google.com.eg");
    }
    return retvalue;
}

function cancelEvent() {
    $(this).parents('.dialog-ovelay').fadeOut(500, function () {
        $(this).remove();
    });
    retvalue = false;
    return retvalue
}

function OkClick() {
    alert("true");
    return true;
}

function Confirm(title, msg, $true, $false, $link) { 
    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'>" + $true + "</button> " +
                   " <button class='button button-default cancelAction'>" + $false + "</button> " +
               "</div>" +
           "</footer>" +
        "</div>" +
      "</div>");
    $('body').prepend($content);

    $(document).find('.cancelAction, .fa-close').on('click.gAction',cancelEvent);
    $(document).find('.doAction').on('click.gAction',OkClick);
}