Modals: move from Jquery UI Dialog to something else?
At present Civi's modals (aka popups) are generated using JQuery UI Dialog. This inserts the modal's markup just above the bottom </body> closing tag, which is outside of #crm-container and #bootstrap-theme divs. This is perhaps related to an issue where modals can't render Bootstrap elements from Form Builder output.
JQuery UI dates back to 2007, is tricky to theme, and doesn't include modern accessibility Aria labels. What are the other options?:
- replace with Bootstrap 3's modal component that ships with Civi. Upside is it's more accessibile, reduces code, is easier to retheme or share styles with the base theme. Downside is there's no grabber to resize the modal, and you can't have multiple modals open at the same time, which Civi likes to do at present. Multiple modals is considered bad UX - Bootstrap5 offers toggling between multiple modals. There's also scripts that extend Bootstrap Modal to support multiple, ie https://codepen.io/neni9/pen/dJVwqr.
-
use an Angular modal method (e.g. https://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial)
-
use another modal library
-
use the html element
<dialog>(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog). Accessible by default, requires no javascript library (can use the native showModal method), widely supported, should never grow old/need replacing, easy to theme… (am writing the upsides in the hope someone replies below with the downsides). -
change nothing, just ensure that #bootstrap-theme can be applied to the contents of a modal.