Question

我需要像这样创建一个弹出窗口：
http://gyazo.com/48a138b2e40fda7e5e72acd1b653a518 在JavaScript中。

当管理员点击Delete链接时，应将一个参数传递给JavaScript on-click功能。

如何将不同的操作绑定到“确定”和“取消”按钮？我的行为如下：

<a href="<c:url value="/Invalidate.do?val=INVALIDATE"/>">Logout</a>

有人可以帮我写这段代码（完整的点击功能）吗？如果您还告诉我如何将此点击附加到我的链接上，那将会很棒。

提前致谢

Answer 1

您可以将window.confirm用于简单的事情。

如果您不介意所有的javascript阻止并且无法控制样式，那么它可以正常工作。

confirm和alert内置于所有浏览器中，但它们非常有限，通常对于一次性以外的任何内容都不是一个非常好的主意。

要获得更多控制权，您必须引入jquery ui dialog或bootbox from bootstrap之类的内容，这只是html，因此无限灵活。但是，除非您已经使用了相关库，否则更难以设置。所有这些都不会阻止javascript执行，这也是更强大和更好的“练习”，但对于人们 - 特别是初学者 - 更难以了解。

所以你可以做一些事情（假设是jQuery）：

$('button[name=delete]').click(function() {
  if(window.confirm("You really sure?"))
     doDelete();
});

或使用jQuery ui：

$('button[name=delete]').click(function() {
    $('<div>').text("You really sure?")  //Create a simple text element to be dialog'ed
        .dialog({
            buttons: {
                "Yes": function(){
                    doDelete()
                    $(this).dialog('close');
                }
                ,"No": function() { $(this).dialog('close'); }
        });
});

为了完整起见，这里有一种方法可以删除冗余代码：

$('button[name=delete]').click(function() {
    $('<div>').text("You really sure?")  //Create a simple text element to be dialog'ed
        .dialog({
            buttons: {
                "Yes": closeAnd(doDelete)
                ,"No": closeAnd()
        });
    function closeAnd(fn) {   //this function is automatically hoisted
        return function() {   //return a handler
             $(this).dialog('close');  //value of 'this' is determined by who invokes it               
             fn && fn();   //invoke fn if it was passed
        }
    }
});

如何在javascript中编写弹出窗口

1 个答案: