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

问题描述

环顾四周，似乎找不到 JQuery 解决方案(也许它只是 JavaScript 的限制):

Looked around quite a bit, and can't seem to find a JQuery solution (maybe its just a limitation of JavaScript) for this:

<a href="somelink.php"
   onclick="return confirm('Go to somelink.php?');">Click Here</a>

在上面的例子中，当用户点击链接时，只有当用户在确认框中点击确定时，它才会转到它的href.

In the above example, when a user clicks on the link, it will only go to its href if the user clicks OK in the confirm box.

我想要做的是使用弹出 div 获得更现代的外观.也许是这样的:

What I am trying to do is get a more modern look using a popup div. Perhaps something like this:

<a href="somelink.php"
   onclick="return jq_confirm('Go to somelink.php?');">Click Here</a>

(其中 jq_confirm 是一个自定义的 JQuery 确认函数，它会弹出一个带有 YES/NO 或 OK/CANCEL 按钮对的漂亮 div).

(Where jq_confirm is a custom JQuery confirm function that pops up a nice div with a YES/NO or OK/CANCEL button pair).

但是，我似乎找不到任何这样的东西.

我查看了一些提供类似功能的 JQuery 小部件库等，但没有一个会等待用户的响应(至少，不是在上述场景中)，而是它们只是继续并将用户带到链接(或运行嵌入在链接的 href='' 部分中的任何 JavaScript).我怀疑这是因为虽然您可以将回调函数附加到其中许多小部件以返回真/假值，但 onclick 事件不会等待响应(回调是异步的em>)，从而破坏了确认框的目的.

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 的模态确认框是否可行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！