To save development time, you normally use a plugin library (for example jQuery UI) for your modals. These libraries are often bloated for the regular use case and if you attempt to override the CSS manually it can be very tedious process. Let’s be honest, no-one likes the “!important” tag!
As an example:
Let’s say you calculate the content height to be 200px.
margin-top: -100px; //100px because it’s half of 200px
Then you would need to replicate this again with the width. You would need to recalculate the content if it dynamically changed, and factor in the window height so the dialog isn’t too high by setting maximum heights.
The solution I am trialling is positioning via CSS3 flexbox. Firstly, you set a container outside of the main content:
Then, the magic with display flex:
top: 0; left: 0;
* You will want to add the –webkit, -moz prefixes (or define a LESS or SCSS mixin).
Eliminates all manual calculations in regards to positioning the modal. No matter the content inside, the position of the modal will be perfectly centered, all determined by CSS and your browser.
– Very basic understanding of jQuery needed.
– Heavy use of modern CSS to style custom dialog (eliminating the need for JS)
– Every modern browser will run it
– MS Internet Explorer 10+ (but is that really a con?)