Hi,
Today I looked at many different modal boxes and all are so huge and
do many things that we don't need.
In my project I need something really simple which works.
This post inspired me:
http://sitening.com/blog/create-a-modal-dialog-using-css-and-javascript/
I'd like to share my solution, which presents only the concept of
necessary things to work:
<code>
<style>
#overlay {
position: absolute;
left: 0px;
top: 0px;
width:100%;
text-align:center;
z-index: 1000;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
background-color: #000;
}
#overlay-content {
position: absolute;
left: 50%;
width:300px;
margin: 300px 0 0 -150px;
background-color: #fff;
border:1px solid red;
padding:15px;
text-align:center;
z-index: 1001;
}
</style>
<div id="overlay"></div>
<div id="overlay-content">
<p>You can put here anything you like.</p>
</div>
<script>
//removing scroll bar
$$('HTML')[0].setStyle({overflow: 'hidden'});
//there's no window.outerHeight in IE6 but I don't care
var height = (window.outerHeight) ? window.outerHeight : 2000;
$('overlay').setStyle({height : height+'px'});
//hiding select boxes in IE
if (Prototype.Browser.IE) $$('SELECT').invoke('setStyle',
{visibility : 'hidden'})
</script>
</code>
That's it!
Tested on: IE6,IE7,FF2&3,Safari & Opera.
Please tell If I missed something.
--
keemor
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
