Tuesday, August 14, 2018

Published 8:59 PM by with 0 comment

How Do I Make A Modal Dialog For A Div Instead Of The Whole Page?

In my quick scan for modal libraries for javascript/html/css, everything was for the entire page. I wanted something for a specific div so I put together a quick demo of one way to do this.



Basic Idea

See code here. Click on the button to put a dialog in the corresponding div, and click anywhere else on the screen to clear the dialogs.

Code Details

There is nothing particularly brilliant in this. I'm just putting one div on top of another and setting the background to be somewhat transparent. Two sort of tricks used here though...
  • Setting owning div to relative position and div for the modal to absolute position allows the modal to sit on top of only the owning div and use 100% width and height to fill it.
  • Setting margin to auto, position to absolute, and l/r/t/b to 0 lets the modal body be centered in the modal div.
That's it. I set a high z-index also to force the modal to the front, and you can customize which modal you want on top with z-index also.




      edit

0 comments:

Post a Comment