CODEWITHSUNDEEP
javascriptjquerypopupcolorbox
shinra tensei
shinra tensei

Reputation: 713

Close colorbox popup with a button and trigger the confirm box?

I have a confirm box on my colorbox("are you sure you want to leave?"). This triggers when i close the popup. This works when i click on the "cboxClose" div on the popup.

I am trying to show this confirm box on a button click. But the popup just closes right away without showing the confirm box.

My question is how do i trigger the the confirm box when i click on a cancel button. i tried several ways

//This just closes the pop up without showing the confirm box 

$('#btnCancel').click(function () {
                 parent.$.colorbox.close(); });

//doesn't work

$('#btnCancel').click(function () {
                     $('#cboxClose').click()
                  });

COLORBOX

onComplete: function () {
 $("#cboxClose").click(function (e) {

                    // stop any other script from firing
                    e.stopPropagation();
                    if (confirm('are you sure you want to leave?')) {
                        $.colorbox.close();
                        // ensure that the binding is removed when closed
                        $("#cboxClose").unbind();
                    }

                });

            } // close oncomplete

Upvotes: 1

Views: 5051

Answers (2)

shinra tensei
shinra tensei

Reputation: 713

I solved this issue by making this method and binding it to the cancel button 

var originalClose = $.colorbox.close;
            $.colorbox.close = function (e) {
                var response;
                var formChanged = localStorage.getItem("isFormChanged");
                var saveClicked = localStorage.getItem("saveClicked");
                if (formChanged == "true" && saveClicked == "false") {
                    response = confirm('Do you want to close this window? All your changes will not be saved');
                    if (!response) {
                        return
                    }
                }
                originalClose();
            };

<input type="button" value="Cancel" id="btncancel" onclick="parent.$.colorbox.close()"/>

Upvotes: 0

uɥƃnɐʌuop
uɥƃnɐʌuop

Reputation: 15113

The issue here is that colorbox registers a click handler on the cboxClose element. As a result, neither stopping bubbling nor preventing the click (by returning false in a click handler) will have any effect because the colorbox handler is already registered. The only way of stopping that handler from being run is to unbind it. However, to do that you need a reference to the handler, which you won't get without modifying the colorbox code.

In any case, that's what's going on and why the code you have above doesn't work. Another option for you would be to override the colorbox close function (which is the public colorbox method that is called by colorbox's close button handler). All you need is this:

$.colorbox._close = $.colorbox.close;
$.colorbox.close = function() {
    if(confirm("Close?")) {
        $.colorbox._close();
    }
}

The down side (which may not be an issue in your situation) is that this will affect all colorboxes on the page.

Upvotes: 2

Related Questions