Tuesday, August 14, 2018

Published August 14, 2018 by with 1 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.


1 comment:

  1. โบนัสแจ็คพ็อต x10,000เท่าของเงินเดิมพัน
    💥💥💥 แจกโบนัส แจ็คพ็อตออกทุกวัน 💥💥💥

    💲 การันตี!! การเงินชัวร์ ไม่เคยมีประวัติโกง 💯%
    💰 1บาท ก็ฝากเข้ามาลุ้นรับแจ็คพ็อตประจำวันได้

    🎁 แจ็คพ็อตอาจตกเป็นของพี่นะคะ 🎁