Home
03/2011

Jquery Html Overlay zum selber schreiben

Um dieses Tutorial nachzuvollziehen, benötigt Ihr eine aktuelle jQuery Version » ein wenig Html und Css Kenntnisse. Demo ansehen

Hier ist der Javascript Teil 

$(document).ready(
    function() {
        $('#open').click(
            function() {
                $('#overlay').show('slow',
                    function() {
                        $('#container').fadeIn('slow');
                        $('#changeText').html('Dynamischer Inhalt');
                    }
                );
            }
        );
 
         $('#close').click(
            function() {
                $('#container').hide('slow',
                     function() {
                          $('#overlay').fadeOut();          
                     }    
                );
            }
        );  
    }
);

Html darf natürlich auch nicht fehlen 

<p>
    <a href="#" id="open">open overlay</a>
    <br />
</p>
<img src="http://cms-sites.de/sites/all/themes/cms-sites-typo/images/ipad.jpg" />
<div id="container">
    <p>
        <a href="#" id="close">close</a>
    </p>
    <p id="changeText">
 
    </p>
</div>
<div id="overlay"></div>

Sowie das Css 

#overlay {
    position:absolute;
    top:0;
    left:0;
    z-index:10;
    height:100%;
    width:100%;
    background:#000;
    filter:alpha(opacity=60);
    -moz-opacity:.60;
    opacity:.60;
    display:none;
}
 
 
#container {
    position:fixed!important;
    position:absolute;
    height:200px;
    width:400px;
    margin:-100px 0px 0px -200px;
    top: 50%;
    left: 50%;
    background-color: #f5f5f5;
    border: 1px solid #000000;
    display:none;
    z-index:1002;
    padding:10px;
}

more »