javascript 如何通过href onclick让fancybox显示“是/否确认框”?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5642259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 17:52:51  来源:igfitidea点击:

How can i make fancybox display a "yes/no confirm box" via a href onclick?

javascripthtmlfancybox

提问by PHPNewEE

im using the following code as replacements for confirm boxes in javascript.

我使用以下代码替换 javascript 中的确认框。

    function fancyAlert(msg) {
    jQuery.fancybox({
        'modal' : true,
        'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input style=\"margin:3px;padding:0px;\" type=\"button\" onclick=\"jQuery.fancybox.close();\" value=\"Ok\"></div></div>"        });    }

function fancyConfirm(msg, callback) {
    var ret;
    jQuery.fancybox({
        'modal' : true,
        'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyConfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
        onComplete : function() {
            jQuery("#fancyConfirm_cancel").click(function() {
                ret = false;
                jQuery.fancybox.close();
            })
            jQuery("#fancyConfirm_ok").click(function() {
                ret = true;
                jQuery.fancybox.close();
            })
        },
        onClosed : function() {
            if (typeof callback == 'function'){ callback.call(this, ret); };
        }
    });
}

function fancyConfirm_text() {
    fancyConfirm("Ceci est un test", function(ret) {
        alert(ret)
    })
}

and im using a hyperlink like this:

我使用这样的超链接:

<a href="http://www.example.com/" onclick="fancyConfirm("Are you sure you want to delete?");">Test</a>

im stuck, it just wont display anything?, i think its got something to do with the callback variable required for fancyConfirm but im unsure what that means and how it applies.

我被卡住了,它只是不会显示任何东西?,我认为它与fancyConfirm所需的回调变量有关,但我不确定这意味着什么以及它是如何应用的。

thanks for your help.

谢谢你的帮助。

回答by Jason LeBrun

There's an error in your link attribute. You can't place double-quotes inside of double-quotes without escaping them. Right now, your onclick attribute is just: "fancyConfirm("

您的链接属性有错误。您不能在不转义双引号的情况下将双引号放在双引号内。现在,您的 onclick 属性只是:“fancyConfirm(”

Try:

尝试:

<a href="http://www.example.com/" onclick="fancyConfirm('Are you sure you want to delete?');">Test</a>

Or:

或者:

<a href="http://www.example.com/" onclick="fancyConfirm(\"Are you sure you want to delete?\");">Test</a>

回答by Nathan

You need this instead:

你需要这个:

<a href="#" onclick="fancyConfirm('Are you sure you want to delete?');return false;">Test</a>

That should work. The hash (#) wont show in the URL because return false;will only make what is in the onclickhappen.

那应该有效。哈希 (#) 不会显示在 URL 中,因为return false;只会使onclick发生的事情发生。

Also, I know this is obvious, but do you have Fancybox and jQuery defined on the page?

另外,我知道这很明显,但是您在页面上定义了 Fancybox 和 jQuery 吗?

回答by SyAu

Have a look at this post,

看看这个帖子,

Javascript/Jquery Callback for Fancybox Yes No Confirm

Fancybox 的 Javascript/Jquery 回调 是 否 确认

The author of fancy box has a slightly different solution and it works.

花式框的作者有一个稍微不同的解决方案,它的工作原理。