CODEWITHSUNDEEP
jquerycolorbox
Dofs
Dofs

Reputation: 19197

Closing Colorbox

I have a simple popup (not an Iframe) where a user can send mail to each other. There is a submit button to send the information and a cancel button which should close the overlay.

I do have some trouble getting the close button to work.

The code looks like this:

<asp:Button runat="server" ID="btnCancel" Text="Cancel" />

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#<%= btnCancel.ClientID %>").click(function () {
            jQuery.colorbox.close(); return false;
        });
    });
</script>

I have tried with both parent.jQuery.colorbox.close(), jQuery.fn.colorbox.close() but with no success.

Upvotes: 12

Views: 51596

Answers (9)

Sthita
Sthita

Reputation: 1782

This may help someone .I have created a custom close button . My custom close button is coming on top right corner and can able to close also. My code :

        jQuery(document).ready(function(){
        jQuery('<div id="close" style="cursor: pointer; position: absolute; top: 0; right: 30px;"><img src="../img/close.png" alt="close"/></div>').appendTo('.yourparentDiv');

        $("#close").click(function() {
            jQuery('#cboxClose').click();
        });
    });

Thanks to @sushil bharwani , I was facing problem on closing the colorbox. It helped me.

Upvotes: 0

sushil bharwani
sushil bharwani

Reputation: 30187

Does your colorbox have a close button at the top. [close]. In my application when i want to introduce a cancel button to close the colorbox window from a link other than already provided by colorbox.

I do a workaround like.

jQuery('#cboxClose').click();

this will click the default close button and will eventually close the colorbox.

Upvotes: 29

user950177
user950177

Reputation: 49

$(".selected_color").live('click',function(){

  $(window).colorbox.close();
});

Using live will work

Upvotes: 1

iPAS
iPAS

Reputation: 4657

Please try this. 

     <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        /* Automatically resize to content */
        var y = $(document.body).height();
        var x = $(document).width();
        parent.$.colorbox.resize({innerWidth:x, innerHeight:y});

        $("#button_cancel").click(function() {
            parent.$.colorbox.close();
            return false;
        })
    });

For button on your iframe html page.

  <button id="button_cancel" type="button">cancel</button>

Upvotes: 7

user731322
user731322

Reputation:

Perhaps this can help: http://jsfiddle.net/fbenariac/4vuDC/18/ (It's a simple example for a colorbox close button).

Upvotes: 1

Mayur bhalgama
Mayur bhalgama

Reputation: 265

I think you missing or mistake small thing in your code. Otherwise close method will work as expected. Have you check first that your button click fire or not? If fire, Have you got any JS error?

Upvotes: 0

Dofs
Dofs

Reputation: 19197

I found out that I was adding jQuery and colorbox twice, since it was loaded both in the frame and the on the page calling colorbox.

It worked after I removed jQuery and Colorbox from the overlay page, so it only got included.

I used 'sushil bharwani' idea, and executed the close event.

Upvotes: 1

jean27
jean27

Reputation: 711

Did you try to use

$.fn.colorbox.close();

instead of

jQuery.colorbox.close();

?

Maybe, you already did this:

 $("#cboxClose").click(function(){
      $.fn.colorbox.close();});

You must not have the problem on closing the colorbox. Actually, I also have a colorbox in an app with a cancel button and that close button which looks like an image. There's no problem at all.

Upvotes: 0

Ioannis Karadimas
Ioannis Karadimas

Reputation: 7896

You can use:

$(window).colorbox.close();

Upvotes: 13

Related Questions