Show a div as a modal pop up

Question

I have the following div    lt div id  divAlert  gt       lt div id  divAlertText  gt You must select a language  lt  div gt       lt div id  divAlertButton  class  btn blue  onclick  HideAlert     gt Ok lt  div gt   lt  div gt    Is this HTML page there are more divs and buttons  I want to show divAlert as a modal pop up   I know there is something in jQuery  I think  that I can use to show my div with a half transparent black background filling the entire page  But I can t remember its name   Any advice

User · Accepted Answer

you can use jquery dialog widget  http   jqueryui com demos dialog

User · Answer

A simple modal pop up div or dialog box can be done by CSS properties and little bit of jQuery The basic idea is simple         1  Create a div with semi transparent background  amp  show it on top of your content page on click             2  Show your pop up div or alert div on top of the semi transparent dimming hiding div      So we need three divs   content main content of the site   hider To dim the content   popup box the modal div to display    First let us define the CSS        hider               position absolute          top  0           left  0           width 1600px          height 2000px          margin-top  -800px    set to a negative number 1 2 of your height           margin-left  -500px    set to a negative number 1 2 of your width                      z- index must be lower than pop up box                   z-index  99         background-color Black           for transparency        opacity 0 6              popup box              position absolute          top  50           left  50           width 10em          height 10em          margin-top  -5em    set to a negative number 1 2 of your height           margin-left  -5em    set to a negative number 1 2 of your width           border  1px solid  ccc          border   2px solid black          z-index 100            It is important that we set our hider div s z-index lower than pop up box as we want to show popup box on top   Here comes the java Script             document  ready function                hide hider and popup box             hider   hide                popup box   hide               on click show the hider div and the message             showpopup   click function                      hider   fadeIn  slow                    popup box   fadeIn  slow                          on click hide the message and the             buttonClose   click function                       hider   fadeOut  slow                    popup box   fadeOut  slow                               And finally the HTML    lt div id  hider  gt  lt  div gt   lt div id  popup box  gt      Message lt br   gt       lt a id  buttonClose  gt Close lt  a gt   lt  div gt       lt div id  content  gt      Page s main content  lt br   gt       lt a id  showpopup  gt ClickMe lt  a gt   lt  div gt    I have used jquery-1 4 1 min js www jquery com download and tested the code in Firefox  Hope this helps

[html] Show a div as a modal pop up

Examples related to html

[html] Show a div as a modal pop up

Examples related to html

Examples related to modal-dialog