javascript - 如何用javascript编写弹出窗口

Question

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

当管理员单击Delete链接时，应将一个参数传递给 JavaScript 单击函数。

如何将不同的操作绑定(bind)到“确定”和“取消”按钮？我的操作如下:

<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
        }
    }
});