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?

S Philp · Accepted Answer · 2009-11-02 14:33:27Z

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 :)

answered Nov 2, 2009 at 14:33

S Philp

4523 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammad Akhtar Over a year ago

I have set this Css to other div z-index: 1001; position: relative; top: 0%; left: 0%; background-color: Transparent; filter: alpha(opacity=40);

mahemoff · Accepted Answer · 2009-11-02 16:23:07Z

0

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".

answered Nov 2, 2009 at 16:23

mahemoff

46.9k39 gold badges174 silver badges234 bronze badges

Collectives™ on Stack Overflow

Modal popup using Javascript and Css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related