Форум программистов [Powered by Invision Power Board]

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>тест Close Block</title>

    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>    
    <style> 

        body {
            font:15px/1.5 arial,helvetica,clean,sans-serif; 
            font-weight: bold;
        }    

        #all {
            background-color: #ffffff;    
            z-index: 1;
            opacity: 1;
            width: 99%;
            height: 99%;
        }
        
        #mmain {
            position: absolute;
            display: block;
            top: 22px;
            life: 22px;
            width: 333px;
            height: 333px;
            border: solid 2px #333399;
            background-color: #ffffff;    
            color: #333399;
            padding: 10px;
            margin: 10px;
        }
        
        #close { 
            position: absolute;
            top: 0px;
            left: 0px;
            display: none; 
            width: 99%;
            height: 99%;
            z-index: -11;
            opacity: 0.7;
            background-color: #555555;    
        }
        .c { 
            cursor: pointer; 
            position: absolute;
            display: block-inline;
            left: 111px;
            border: solid 2px #ee6633;
            color: #ee6633;
            width: 111px;
            padding: 5px;
            margin: 0px;
        }

        .show {
            position: absolute;
            display: none;
            top: 11px;
            left: 222px;
            width: 333px;
            height: 333px;
            border: solid 2px #aa3333;
            background-color: #ff9933;    
            color: #3333ff;
            padding: 10px;
            margin: 10px;
            z-index: -22;
        }
        #c1 { top: 55; }
        #c2 { top: 111; }
        
    </style>
</head>
<body >    
<div id="all" ></div>
    <div id="mmain" ><b>тест Close Block Position</b>
        <div id="c1" class="c"> open </div>
        <div id="c2" class="c"> ups </div>

    </div>      
<div id="close" ></div>
<div id="show" class="show"></div>
<script language="JavaScript">

    $('#close').click( function(){
        $('#show').css('z-index','-22');
        $('#show').css('display','none');
        $('#show').html('');
        $('#close').css('z-index','-11');
        $('#close').css('display','none');
    });
    
    $('#c1').live('click', function (){
        $('#close').css('z-index','11');
        $('#close').css('display','block');

        $('#show').html(
        '<br>'
        +'<br><a href="http://www.walks.ru/" target="new">www.walks.ru<br><br>'
        +'<img src="http://www.walks.ru/stdt/petersburg/piter05/Piter05_09_108m.jpg" />'
        +'</a>'
        );
        $('#show').css('z-index','22');
        $('#show').css('display','block');
    });

    $(function(){
        $('.c').click( function(){
            $(this).siblings().css('text-decoration','none');
            $(this).css('text-decoration','underline');
        });
        
        $('#c2').click( function(){
            alert('UPS');
        });
        
        
    });
</script>
</body>
</html>