CODEWITHSUNDEEP
jquerycolorbox
kyle
kyle

Reputation: 11

Close colorbox modal window by clicking anchor link within modal window?

I have made an anchor link - I am trying to make it so that when I click this anchor link (contained within the colorbox modal window) it will close the colorbox.

$(document).ready(function(){
     $('.newWindow a').click(function(){
          alert('hello world'); // checking to be sure click function is being called
         $.fn.colorbox.close(); 
     });
 });

I would think this would work.. what could I be doing incorrectly?

The content loaded in the colorbox is a hidden div on the page, not an iframe.

EDIT: I don't know why it wasn't working. I have seen someone else's example and it was put together just as mine was. I noticed that when clicking on the transparent div to give the 'depth of field' with the colorbox the modal window will fade out/close. So I changed the code to:

 $(document).ready(function(){
     $('.newWindow a').click(function(){
         $('#DOMWindowOverlay').click(); // click overlay div and close colorbox
     });
 });

Not really a fix - it's a workaround.. but it works!

Upvotes: 1

Views: 5077

Answers (4)

bishnu
bishnu

Reputation: 11

Just put anchor onclick="$('#registerDialog').dialog('close');">

Where registerDialog is the modal dialog id like here data_dialog_id

@Html.ActionLink("Register", "Register", "Account", null, 
    new { @class = "openDialog",
          data_dialog_id = "**registerDialog**", 
          data_dialog_title = "btewary.blogspot.in" })

Upvotes: 0

Jack
Jack

Reputation: 9548

Kyle, that looks fine to me. Make sure you are also canceling the default action of the anchor, by returning false in your event handler or using the preventDefault method. Ex:

 $('.newWindow a').click(function(){
     $.colorbox.close();
     return false;
 });

It's ok to use .fn, (it is the standard way to access a jQuery plugin's methods), but it isn't required for any of colorbox's.

Upvotes: 2

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

Reputation: 15113

It doesn't work because the link doesn't exist when the docReady is run. In the future, you can do one of 2 things: A) put your click handler in a jquery live() function (still in docReady), or B) use colorbox's onComplete option to create the click handler (placed in the object literal you send when you create the colorbox).

Also, as Thorsten pointed out, the .fn part is not necessary because the author of colorbox had the foresight to create a link to $.colorbox.

Upvotes: 0

Thorsten
Thorsten

Reputation: 5644

What is that .fn for?

Try

$.colorbox.close()

Upvotes: 0

Related Questions