Colorbox modal mode needed

[sorokins]

When this option enabled, overlayClose and escKey must be set to "false", and close button must be hidden.
Now I do it manually, it's sad. Shadowbox has this option.

[paazmaya]

In case options contain modal = true, $.colorbox.close() would be required to close the window.

[jackmoore]

I'm always hesitant to add new options, especially when a feature can be replicated fairly easily through JS or CSS. But, I agree it needs to be more convenient to hide the close button. How about instead of a modal option, there is a new option for hiding the close button. This will give the most flexibility, and it's easy enough to change the defaults that having to set 2 additional properties shouldn't be that much of a burden. Does this sound acceptable?

[paazmaya]

Sorry missed your comment, @jackmoore. Sure, even the option for removing/hiding close button is good.

[jackmoore]

I'll put it in. I looked into other lightboxes to see what their 'modal' option did, and it doesn't seem to match the original poster's definition, except for maybe Fancybox. Shadowbox's and jQuery UI dialog's modal option seems to be the equivalent to Colorbox's overlayClose option. I think just adding the ability to remove the close button will be clearer than combining options.

[PaulGobin]

Hello- first off, colorbox is a really cool pluggin! Thank you.
I have a situation where I display a video chat in colorbox (popped up iframe) when a user clicks a video chat link in a page. Once colorbox popped up, I need to be able to access the parent page so that the user can still navigate and click/highlight contents in the parent page while colorbox stays visiible. Any help would be much appreciated.
~Paul

[aik099]

@PaulGobin , but when ColorBox is opened it puts greyed out div behind it and you can't really click anywhere on the page. If you press Esc or click on that div, then ColorBox window closes. That is real modal window.

[PaulGobin]

I actually set the opacity to 0 and overlay close to false. This allows the user to still see the contents of the parent page and can only close the pop-up video chat by clicking the close (X) button (I understand it still has the overlay but it's transparent)
I was hoping to accomplish the effect one see when the hit a site with chat support capability where the small chat box floats on the screen without getting in the way of the user navigating the page.
~Paul

[jackmoore]

Colorbox might not be the right plugin for what you are trying to do. It would be easy to hide or remove the overlay. You could delete the element from the DOM, or hide it with css, like so:

#cboxOverlay {display: none !important; }

But Colorbox lacks the ability to let the user control it's positioning, unlike something like jQuery dialog from the jQuery UI kit.

[PaulGobin]

@jackmore
Thanks for the info, I add some js to the oncomplete event that allows the user to drag and resize the colorbox. I will try your suggestion on hiding the overlay and see it it works, if not I will try the other dialogs.
~Paul

[PaulGobin]

@jackmoore
Adding the css works! thank you very much!

To be able to move the colorbox around the screen, I add the following JS:
to the oncomplete event:

//functionality to drag the dialog
,onComplete: function (e) {
$('#colorbox').on({
mousedown: function (e) {
if (~$.inArray(e.target, $('input, textarea, button, a, .no_drag', $('#colorbox')))) return;
var os = $('#colorbox').offset(),
dx = e.pageX - os.left, dy = e.pageY - os.top;
$(document).on('mousemove.drag', function (e) {
$('#colorbox').offset({ top: e.pageY - dy, left: e.pageX - dx });
});
},
mouseup: function () { $(document).unbind('mousemove.drag'); }
});
}