Modal popup using Javascript and Css

Question

I am using AJAX modal popup in my project, but there is problem with it.

Now I decided to acheive similar behaviour using javascript

I am able to show popup using

document.getElementById('dv').style.display = "block";

Now I just need, how can I make background disable like in modal popup?

Answer 1

you create a div that spans the whole page but initial style is display:none; along with any other styles. i.e transparency 80% with background colour of black..

When you show dv change the display attribute of the div (above). Just make sure that the dv has a higher z-index than the background div and the background div has a higher z-index than the content on the page :)

Answer 2

Have you considered using a library for this? The most programmer-friendly and flexible I have found is NyroModal (jQuery based). The advantage of a library is it will deal with many subtle things that happen with modal dialogs, e.g. ensuring it works effectively across all browsers (and overcomes the various quirks around things like positioning), animating on and off, lightbox effect around it.

NyroModal lets you generate dialogs dynamically, whereas most libraries are geared owards simpler use cases such as "make all images clickable so they show up as lightboxed when the user clicks on them".