Javascript 来自自定义警报的返回值

可能重复：

TL；DR:我已经用一个基于HTML的自定义函数覆盖了默认的

alert（）

函数。我希望新对话框仍然阻止执行，并让对话框中的按钮从调用

alert（）

返回

true

或

false

，以便在逻辑中使用（并继续执行）

---

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

我已经阅读了这个问题，我正在使用中给出的解决方案（对同一个问题）。我现在要做的是，根据单击的是

OK

还是

Cancel

，获取覆盖的警报，以返回在

if（）

语句中使用的真值或假值：

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

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

• 我无法从替换对话框中的按钮返回值（单击与

  $.on（）

  绑定的事件），因为我不知道如何返回
• 据我所知，我无法用此警报阻止程序流

我已将

$.on（）

事件绑定到替换对话框中隐藏该框的

取消

和

确定

按钮。这些操作很好，但我现在遇到的问题是在单击按钮时返回一个值，这样在用户执行操作之前执行将停止

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>

理想情况下，我希望能够在

//自定义警报框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（）

删除警报，这很简单。不知道的是如何获取按钮单击事件以获取

警报（）

（覆盖）以返回某些内容

---

我尽力想说清楚，但我可能遗漏了什么。如果有，请告诉我。

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

/*
  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...

由于我们通过分别为true和false绑定onclick事件来实现所需的结果，因此其他一切都是为了描绘画面

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

   <!-- 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>  

以上两种都不是实施的示范模式，但应该提供一些关于如何执行任务的想法

最后。。。您真的需要替换本机警报方法吗？也就是说，要么您正在编写警报调用（在这种情况下，您知道如何使用自定义方法），要么您正在覆盖无法保证其他开发人员会知道的默认行为

总体建议：

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

---

SOliver.

为什么不使用这样的确认框呢

var c = confirm('Confirm?');

if(c)
{
    // Yes clicked
}
else
{
    // No clicked
}

或者可以使用jQueryUI的对话框确认

---

我认为这基本上是不可能的，因为浏览器的默认对话框是JS中唯一可以使用的模式。Javascript中似乎不存在模态对话框的概念。你知道什么，我不久前问过。@Pekka我在键入问题时查看了建议，但找不到任何相关的建议。您的问题的答案似乎集中在使用框架或特定于浏览器的版本上。我一直在寻找一个跨平台的解决方案。我的问题的答案的问题是他们没有回答：）现在的情况就是这样。使用回调很酷，通常是一个可行的解决方案，但我仍然想知道是否有任何方法可以在JS中使用真正的模态自定义对话框-我可能会给我一个奖励我可能没有这么明确地说，但我的问题是如何替换浏览器的

alert（）

函数，不只是使用它的返回值。@JamWaffles我只是更新了我的问题。您可以使用jQueryUI的对话框谢谢您的推荐，但我不想使用jQueryUI，特别是考虑到我已经使用SOliver的解决方案编写了自己的对话框。尽管如此，还是感谢您的帮助。如果他想要一个真正的模式解决方案，就不能使用jQuery UI的对话框。非常感谢您的回答。我试图覆盖默认的

alert（）

行为，主要是为了写

if（alert（'Yes？'）

，并去掉更多的LOC。唉，这是不可能的，所以我在这里用了你的解决方案来回调。在这种情况下，你关于开发人员的观点是无效的，因为我自己在做这件事，但是这是一个非常好的观点，所以谢谢你。我已经编写了自己的函数（不称为

alert（）

）来处理自定义警报。这很好，但也不是模态对话框的真正解决方案。

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

var c = confirm('Confirm?');

if(c)
{
    // Yes clicked
}
else
{
    // No clicked
}