Modal overlay after second dialog

grid

I've been testing a modal dialog that's been made with bootstrap. The modal dialog will load if you choose a value from the select 'Office' in datatables editor. When it's on screen there will be no modal overlay directly behind it because it's going to get after the datatables editor dialog. Probably because it's made in bootstrap too.

I think the css class 'modal-backdrop fade show' will get in conflict with the one of the datatables editor (one layer above it). Is there anything that can be done to show it up correctly?

http://live.datatables.net/wibefibu/2

Thanks,

Mark

grid

A couple of solutions here to solve the problem:

https://stackoverflow.com/questions/19528173/bootstrap-open-another-modal-in-modal

Thanks,

Mark

allan

Hi Mark,

Unfortunately a single modal on the page at a time is a limitation of Bootstrap. Two solutions I'm aware of:

1. Use a different display controller for Editor (e.g. its built in lightbox) rather than the Bootstrap modal integration (or create a new plug-in one).
2. Close your existing modal before then triggering the modal.

Sorry I don't have a better answer for you!

Allan

grid

Ok thanks. A different display controller I didn't research yet. Also not found an example of yet.

The previous example is working: http://live.datatables.net/wibefibu/10/edit

Only when I close the modal to bring focus on the editor back; I will touch/scroll behind the editor until I press a field in the editor. This happens on the Ipad.

Is there an option to bring the editor focus back programmatically?

Thanks,

Mark

allan

You can use field().focus() to focus on a field in the form programmatically.

Allan

grid

Hey Allan,

It's ok with a little change on the css, thanks.

http://live.datatables.net/wibefibu/16/edit

Mark