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.

回答1:

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.

回答2:

You can use:

$(window).colorbox.close();

回答3:

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>

回答4:

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.

回答5:

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

回答6:

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

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

Using live will work

回答7:

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.

回答8:

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?

回答9:

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.