Completely remove the Close button area

[cadilhac]

Hi,

I'm still using v1.3.34 (because of the change on the button style that don't allow me to have 2 buttons anymore).

I would like to modify the source to completely remove the Close area at the bottom given a specific new option. I see that cboxLoadedContent has a margin-bottom set in the css so that the Close area is visible. I'm not sure where in the code I could set this css prop to 0 if my option is set to hide, or revert it back to the default value is the option is not set.

Or do you see another way?

Thank you

[jackmoore]

I think you could use the className property. Set a class that removes that bottom margin and hides the close button. For example:

$('a.example').colorbox({className: 'noButton'});

.noButton #cboxLoadedContent { margin: 0 }
.noButton #cboxClose { display: none !important; }

[cadilhac]

Almost. The Close area is now empty but still occupies the same space. Setting the margin to 0 does not do it. Strangely, modifying your default margin in the css file manually makes it work. Any idea?

[jackmoore]

Oh, sorry, that might not work for the version you are using. I made some changes since then to better account for the className changing the layout. It might be easier to just move to the most recent version and change the close button HTML from button to div or whatever it is you need. Or you could append your additional button instead of changing the existing markup. For example:

$('<button style="position:absolute;top:0;left:0;">Hello</button>').appendTo('#cboxContent');

[cadilhac]

Thanks for this excellent support. I tried with the latest version but now it becomes more tricky. The className technique will work if I open a brand new colorbox. But if I call colorbox while it is already visible (to display a new content and also hide the close area with className), my buttons won't be displayed but the space is still there. It's as if the technique can't be used when it is resized compared to when it is initially displayed.

[cadilhac]

Were you able to find a reason for this? Thanks.

[neormx]

Hello, I'm using version 1.6.4 and the close area is still there if I choose to use {closeButton: false}. The {className: 'noButton'} approach works well; but, would it be possible to handle it automatically whenever {closeButton: false} is set?