Javascript 是否可以使用JQuery创建模式确认框？

环顾四周，似乎找不到JQuery解决方案（可能只是JavaScript的一个限制）：

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

在上面的示例中，当用户单击链接时，只有在用户单击“确认”框中的“确定”时，才会转到其href

我想做的是使用弹出式div获得更现代的外观。可能是这样的：

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

<a href="javascript:confirmRedirect('somlink.php','Are you sure?')">Go!</a> 

function modalConfirm(message, callback){
  ... 
  $("button.yes").click(function(){
     callback(result);
  });
  ...
}

confirm("Are you sure?", function(result){
  alert(result);
});

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

然而，我似乎找不到这样的东西。

我已经看过一些JQuery小部件库等，它们提供了类似的功能，但没有一个会等待用户的响应（至少在上面描述的场景中不是这样），而是继续并将用户带到链接（或者运行链接href=''段中嵌入的任何JavaScript）。我怀疑这是因为虽然您可以将回调函数附加到许多这些小部件以返回真/假值，onclick事件不会等待响应（回调是异步的），因此无法达到确认框的目的

我需要的是默认的confirm（）命令提供的停止所有javascript（模式）功能。这在JQuery（甚至JavaScript）中可能吗

因为我既不是JavaScript专家，也不是JQuery专家，所以我听从各位大师的意见。任何JQuery（甚至纯JavaScript）解决方案都是受欢迎的（如果可能的话）

谢谢-退房

它们有各种各样的JQuery模式框

我想你应该看看

JavaScript确认函数的模式对话框重写。演示onShow的使用，以及如何显示模式对话框确认，而不是默认的JavaScript确认对话框

---

将重定向放入函数中，如下所示：

<script>
    function confirmRedirect(url, desciption) {
       if (confirmWindow(desciption)) {
           window.location = url;
       }
    }
</script>

函数confirmRedirect（url，描述）{
if（确认窗口（说明））{
window.location=url；
}
}

这样称呼它：

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

<a href="javascript:confirmRedirect('somlink.php','Are you sure?')">Go!</a> 

function modalConfirm(message, callback){
  ... 
  $("button.yes").click(function(){
     callback(result);
  });
  ...
}

confirm("Are you sure?", function(result){
  alert(result);
});

---

您应该能够覆盖标准窗口。确认功能将写入以下代码

window.confirm = modalConfirm

然后你需要做一个这样的函数

function modalConfirm(message){
  // put your code here and bind "return true/false" to the click event
  // of the "Yes/No" buttons.
}

虽然我还没有测试过，但它应该可以工作。我现在就要做这件事，我会让你们知道它是如何工作的

编辑： 我已经测试了上面的示例，但这是不可能的，您必须将回调函数传递给覆盖的确认函数，如下所示：

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

<a href="javascript:confirmRedirect('somlink.php','Are you sure?')">Go!</a> 

function modalConfirm(message, callback){
  ... 
  $("button.yes").click(function(){
     callback(result);
  });
  ...
}

confirm("Are you sure?", function(result){
  alert(result);
});

…使您对函数的调用如下所示：

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

<a href="javascript:confirmRedirect('somlink.php','Are you sure?')">Go!</a> 

function modalConfirm(message, callback){
  ... 
  $("button.yes").click(function(){
     callback(result);
  });
  ...
}

confirm("Are you sure?", function(result){
  alert(result);
});

换句话说，要完全覆盖默认的window.confirm函数而不导致导致浏览器挂起的讨厌循环，是不可能的。我想您将不得不像上面那样修改确认呼叫。

您是否看到on

---

我不得不解决同样的问题。我最终使用了来自的小部件。我可以在不使用回调的情况下实现这一点，但需要注意的是，对于要使用确认功能的链接（如果要对多个链接使用此功能），必须在

单击
事件处理程序中部分初始化
对话框。这是因为必须将链接的目标URL注入确认按钮单击的事件处理程序中

这是我的解决方案，经过抽象，适合作为一个例子。我使用CSS类来指示哪些链接应该具有确认行为

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


你确定吗？
$（文档）.ready（函数（）{
$（“#对话框”）。对话框({
自动打开：错误，
莫代尔：对
});
$（“.confirmLink”）。单击（函数（e）{
e、 预防默认值（）；
var targetUrl=$（this.attr（“href”）；
$（“#对话框”）。对话框({
按钮：{
“确认”：函数（）{
window.location.href=targetUrl；
},
“取消”：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
$（“对话框”）。对话框（“打开”）；
});
}); // 美元结束（文档）。准备好了吗
以下链接有一个用于确认框的jQuery插件，类似于在JavaScript中构造类似确认（“某物”）的框

我解决这个问题的方法是向对象添加一些任意数据，并在单击时检查这些数据。如果存在，则按正常方式继续该函数，否则用是/否确认（在我的情况下，使用jqtools覆盖）。如果用户单击“是”-在对象中插入数据，则模拟再次单击并擦除数据。如果他们单击“否”，只需关闭覆盖

以下是我的例子：

$('button').click(function(){
    if ($(this).data('confirmed')) {
        // Do stuff
    } else {
        confirm($(this));
    }
});

这就是我覆盖确认函数所做的（使用jquery工具覆盖）：

window.confirm=功能（obj）{
$（'#dialog'）.html（'\
\
证实\
你确定吗？
\
\
对\
没有\
\
'）.overlay（）.load（）；
$（'button[name=confirm]'）。单击（函数（）{
如果（$（this.val（）=='yes'）{
$（'#dialog'）.overlay（）.close（）；
对象数据（'已确认'，为真）。单击（）。删除数据（'已确认'）；
}否则{
$（'#dialog'）.overlay（）.close（）；
}
});
}
在巴努的解决方案之上构建（非常感谢！），使其成为每页顶部的一键式解决方案。将此代码粘贴到：

$(document).ready

并将“confirmLinkFollow”类添加到所有要确认的链接：

$(".confirmLinkFollow").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");
var $dialog_link_follow_confirm = $('<div></div>').
        html("<p>Are you sure?</p>").
        dialog({autoOpen: false,
        title: 'Please Confirm',
        buttons : {
            "Confirm" : function() { 
                window.location.href = targetUrl; 
        },
        "Cancel" : function() { 
                $(this).dialog("close"); 
            }
        },

        modal: true,
    minWidth: 250,
    minHeight: 120
    }
    );


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

$（.confirmLinkFollow”）。单击（函数（e）{
e、 预防默认值（）；
var targetUrl=$（this.attr（“href”）；
变量$dialog\u link\u follow\u confirm=$（''）。
html（“你确定吗？
”）。
对话框（{autoOpen:false，
标题：“请确认”，
按钮：{
“确认”：函数（）{
window.location.href=targetUrl；
},
“取消”：函数（）{
$（这个）