javascript - How can i make fancybox display a "yesno confirm box" via a href onclick? - Stack Overflow

admin管理员组

文章数量:1402560

im using the following code as replacements for confirm boxes in 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="/" 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.

thanks for your help.

im using the following code as replacements for confirm boxes in 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./" 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.

thanks for your help.

• javascript
• html
• fancybox

Share Improve this question Follow edited Jul 15, 2016 at 12:25 unloco 7,36044 gold badges5151 silver badges6161 bronze badges asked Apr 12, 2011 at 22:14 PHPNewEEPHPNewEE 2111 gold badge11 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

Try:

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

Or:

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

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 onclick happen.

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

Have a look at this post,

Javascript/Jquery Callback for Fancybox Yes No Confirm

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

本文标签： javascriptHow can i make fancybox display a quotyesno confirm boxquot via a href onclickStack Overflow