从自定义警报返回值

Question

可能的重复：
如何在 Javascript 中创建真正的模式警报/确认？

TL;DR：我已经alert()用基于自定义 HTML 的函数覆盖了默认函数。我希望新对话仍然阻止执行，并让我的对话中的按钮返回true或false从调用中返回alert()以在逻辑中使用（并继续执行）。

---

我正在尝试实现一个自定义警报框，它将默认浏览器警报替换为具有相同（或类似）功能的主题精美的框。

我已阅读此问题，并且正在使用此答案中给出的解决方案（针对同一问题）。我想现在要做的是让我重写警惕使用返回true或false值中if()陈述，取决于是否OK还是Cancel被点击：

if(alert('Confirm?') {
    // Do stuff
}

但是，由于使用自定义 HTML 而不是普通警报，我无法执行此操作，原因有两个：

• 我无法从替换对话框中的按钮返回值（与 绑定的单击事件$.on()），因为我不知道如何返回。
• 据我所知，我无法使用此警报阻止程序流。

我已将$.on()事件绑定到隐藏框的替换对话框中的Cancel和OK按钮。这些工作正常，但我现在遇到的问题是单击按钮时返回一个值，以便执行将停止，直到用户采取操作。

HTML：

<div class="alert background"></div>

<div class="alert box">
    <div class="message"></div>

    <hr>

    <div class="buttons">
        <input type="button" name="cancel" value="Cancel">
        <input type="button" name="confirm" value="OK">
    </div>
</div>

当前的 JavaScript ：（几乎是我链接问题中答案的副本）

(function () {
    nalert = window.alert;

    Type = {
        native: 'native',
        custom: 'custom'
    };
})();

(function (proxy) {
    proxy.alert = function () {
        var message = (!arguments[0]) ? 'null' : arguments[0];
        var type = (!arguments[1]) ? '' : arguments[1];

        if (type && type == 'native') {
            nalert(message);
        } else {
            // Custom alert box code
            console.log(message);
        }
    };
})(this);

理想情况下，我希望能够在// Custom alert box code零件中放入这样的东西：

$('.alert.box input[name="confirm"]').on('click', function() {
    // Hide dialogue box - I can do this already

    // *** Return `true` or other truthy value from 
    // alert for use in `if()` statements
});

因此，当单击OK或Cancel按钮时，它会删除自定义警报框并从对 的调用返回真或假值alert()。我已经可以使用$.fadeOut()和删除警报$.remove()，这很容易。不知道如何获取按钮单击事件以获取alert()（覆盖）以返回某些内容。

我试图尽可能清楚，但我可能错过了一些东西。如果我有，请告诉我。

Answer 1

下面的示例显示了创建自定义警报并处理用户选择结果的方法

/*
  message = String describing the alert
  successCallBack = callback function for when the user selects yes
*/
function exampleAlert(message, successCallback)
{
    /*Alert box object*/
    var alertBox =  document.createElement("div");

    /*Alert message*/
    var msg = document.createElement("div");
    msg.innerHTML = message;

    /*Yes and no buttons
      The buttons in this example have been defined as div containers to accentuate the customisability expected by the thread starter*/
    var btnYes = document.createElement("div");
    btnYes.innerHTML= "Yes";

    /*Both yes and no buttons should destroy the alert box by default, however the yes button will additionally call the successCallback function*/
    btnYes.onclick = function(){      $(this.parentNode).remove();successCallback();}
    var btnNo = document.createElement("div");
    btnNo.innerHTML= "No"
        btnNo.onclick = function(){ $(this.parentNode).remove();}

   /*Append alert box to the current document body*/
   $(alertBox).append(msg, btnYes, btnNo).appendTo("body");
}

function test()
{
   alert("Example alert is working, don't use this test as a replacement test - horrible recursion!")  
}
exampleAlert("shoe", test)

这是相当基本的，不允许向回调函数提供额外的数据，因此对于生产来说并不理想，但是 jQuery 的 .bind() 和类似方法允许数据与回调方法关联

值得评论的是，虽然上面演示了问题的完整实现，但实际上只有两行真正重要。

btnYes.onclick...
btnNo.onclick...

由于我们通过分别将 onclick 事件绑定为 true 和 false 来实现所需的结果，因此其他一切都可以绘制图片。

考虑到这一点，可以有效地将至少具有一个同级的任何容器对象转变为警报框，例如：

   <!-- Example html -->
   <div id='a'>
      <ul>
         <ul>
            <li>Something</li>
            <li>Something Else</li>
            <li id='yesIdentifier'>Something not necessarily suggesting a trigger?</li>
         </ul>
      </ul>
   </div>  

只要您的是/否（如果不存在）选项会破坏相应的容器，就可以通过几行代码来处理将容器转换为警报框。

$('#yesIdentifier', '#a').click(
        function(){ someCallback(); $(this).closest('#a').remove()});

以上都不是实施的示例模型，但应该提供一些关于如何完成任务的想法。

最后...你真的需要替换原生的alert方法吗？也就是说，要么您正在编写警报调用（在这种情况下您知道使用自定义方法），要么您正在覆盖默认行为，而您无法保证其他开发人员会意识到这一点。

总体推荐：

我认为最好的方法是创建一个 jQuery 插件，它可以动态创建自定义警报并跟踪回调、结果以及插件中没有的内容。

索利弗。