是否可以使用JQuery的模态确认框？ [英] Is a Modal Confirm Box Using JQuery Possible?

问题描述

看了很多，似乎无法找到一个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 if用户在确认框中单击确定。

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）。我怀疑这是因为虽然您可以将回调函数附加到许多这些小部件以返回true / false值，但 onclick 事件不会等待响应（回调是异步的），从而破坏了确认框的目的。

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.

我需要的是同样的halt-all-javascript（模态）功能，默认 confirm（）命令提供。这在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).

谢谢 -

推荐答案

我只需要解决同样的问题。我使用 对话框 小部件结束了< a href =http://jqueryui.com/home =noreferrer> JQuery UI 。我能够在不使用回调的情况下实现这一点，但必须在点击事件处理程序中部分初始化对话框对于要使用确认功能的链接（如果要将其用于多个链接）。这是因为必须将链接的目标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的模态确认框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！