自定义提醒返回值[重复]-Java 学习之路

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

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

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

我已经阅读了this问题，我正在使用this answer中给出的解决方案（对于同一个问题） . 我现在要做的是获取我的重写警报，以返回在 if() 语句中使用的true或false值，具体取决于是否单击了 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>

Current 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() 返回true或false值 . 我已经可以使用 $.fadeOut() 和 $.remove() 删除警报，'s easy. What isn'知道如何获取按钮单击事件以获取 alert() （重写）以返回某些内容 .

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

2 回答

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

/*
  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来实现所需的结果，因此其他所有内容都可以绘制图片 .

考虑到这一点，可以有效地将具有至少一个兄弟的任何容器对象转换为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>

只要您的是/否（如果不存在）选项销毁适当的容器，就可以通过几行代码处理将容器转换为警告框 .

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

以上都不是用于实现的示例性模型，而是应该提供关于如何执行任务的一些想法 .

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

总体建议：

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

SOliver .

回复于 2024-04-29T18:26:56+08:00

4
为什么不直接使用这样的确认框 .
```
var c = confirm('Confirm?');

if(c)
{
    // Yes clicked
}
else
{
    // No clicked
}
```
或者您可以使用jQuery UI的对话框确认框 .

http://jqueryui.com/demos/dialog/#modal-confirmation
回复于 2024-04-29T18:26:56+08:00

自定义提醒返回值[重复]

2 回答

相关问题