I just needed a very simple working modal popup. After a search I came up to this website:
http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
But this one did not all things I wanted. What I wanted was to greyout the rest of the page so I modified the jQuery code and now it works fine for me.
jQuery
Modified this:
$("BODY").append(
'<div id="popup_container">' +
'<h1 id="popup_title"></h1>' +
'<div id="popup_content">' +
'<div id="popup_message"></div>' +
'</div>' +
'</div>');
to:
$$("BODY").append(
'<div id="popup_container">' +
'<h1 id="popup_title"></h1>' +
'<div id="popup_content">' +
'<div id="popup_message"></div>' +
'</div>' +
'</div>' +
'<div id="popup_container_outer">' +
'</div>');
And in the _hide: function() add this:
$("#popup_container_outer").remove();
CSS
/********* begin alertbox *********/
#popup_container_outer {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
min-height:auto;
background-color:#CCCCCC;
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity:0.5; /* khtml, old safari */
-moz-opacity:0.5; /* mozilla, netscape */
opacity:0.5; /* fx, safari, opera */
z-index:5000;
}
#popup_container {
font-family:Arial, sans-serif;
font-size:12px;
min-width:300px; /* Dialog will be no smaller than this */
max-width:600px; /* Dialog will wrap after this width */
background:#FFF;
border:solid 2px #e36e05;
color:#000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#popup_title {
font-size:14px;
font-weight:bold;
text-align:center;
line-height:1.75em;
color:#bc3927;
background:#CCC url(../img/title.gif) top repeat-x;
border:solid 1px #FFF;
border-bottom:solid 1px #999;
cursor:default;
padding:0em;
margin:0em;
}
#popup_content {
background:16px 16px no-repeat url(../img/info.gif);
padding:1em 1.75em;
margin:0em;
}
#popup_content.alert {
background-image:url(../img/info.gif);
}
#popup_content.confirm {
background-image:url(../img/important.gif);
}
#popup_content.prompt {
background-image:url(../img/help.gif);
}
#popup_message {
padding-left:48px;
}
#popup_panel {
text-align:center;
margin:1em 0em 0em 1em;
}
#popup_prompt {
margin:.5em 0em;
}
/********* end alertbox *********/
