使用 JQuery 的模态确认框是否可行?

I have looked at some JQuery widget libraries etc which offer similar functionality, but none will wait for the response from the user (at least, not in the scenario described above), but instead they just proceed and take the user to the link (or run any JavaScript embedded in the href='' piece of the link). I suspect this is because while you can attach a callback function to many of these widgets to return a true/false value, the onclick event does not wait for a response (callbacks are asynchronous), thereby defeating the purpose of the confirm box.

我需要的是默认 confirm() 命令提供的相同类型的halt-all-javascript(模态)功能.这在 JQuery 中是否可行(甚至在 JavaScript 中)?

What I need is the same kind of halt-all-javascript (modal) functionality that the default confirm() command provides. Is this possible in JQuery (or even in JavaScript)?

由于我不是 JavaScript 和 JQuery 方面的专家，所以我听从各位大师的意见.欢迎任何 JQuery(甚至纯 JavaScript)解决方案(如果可能).

As I am not an expert in JavaScript nor in JQuery, I defer to you gurus out there. Any JQuery (or even pure JavaScript) solution is welcome (if possible).

谢谢-

推荐答案

我只需要解决同样的问题.我最终使用了来自 dialog 小部件://jqueryui.com/home" rel="noreferrer">JQuery UI.我能够在不使用回调的情况下实现这一点，但需要注意的是 dialog 必须在 click 事件处理程序中为要使用确认功能的链接部分初始化(如果您想将其用于多个链接).这是因为必须将链接的目标 URL 注入到确认按钮单击的事件处理程序中.

I just had to solve the same problem. I wound up using the dialog widget from JQuery UI. I was able to implement this without using callbacks with the caveat that the dialog must be partially initialized in the click event handler for the link you want to use the confirmation functionality with (if you want to use this for more than one link). This is because the target URL for the link must be injected into the event handler for the confirmation button click.

这是我的解决方案，抽象出来以适合示例.我使用 CSS 类来指示哪些链接应该具有确认行为.

Here's my solution, abstracted away to be suitable for an example. I use a CSS class to indicate which links should have the confirmation behavior.

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });




  }); // end of $(document).ready


</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

这篇关于使用 JQuery 的模态确认框是否可行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！