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 prototype-scriptaculous@googlegroups.com
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
-~----------~----~----~----~------~----~------~--~---

Reply via email to