Доброго времени суток уважаемые форумчане! Подскажите пожалуйста, что делать либо где почитать, что то не получается не знаю почему, ситуация такая

Есть какой то определенный блок по нему должны изначально кликнуть.

По клику становятся видимыми другие три блока, один из которых становится на весь экран, другой по центру экрана и третий вложенный во второй, нужен для того чтобы можно было по нему кликнуть и блоки снова исчезли.

Вот так это примерно выглядит

        <div id="klik">Нажми на меня!</div>
        <div id="id1">
            <div id="id2">
                <div id="klik_exit">Спрятать</div>
             Привет Форумчане!
             </div>
        </div>

Для вывода и скрытия по клику использую вот такие функции

Показывает блоки

   
 $("#klik").click(function(){
        $("#id1").css({
            'display':'block',
        });
    });

Скрывает блоки

   
 $("#klik_exit").click(function(){
        $("#id1").css({
            'display':'none',
        });
    });

На ОЧЕНЬ многих сайтах, наверное на всех, я заметил что там не нужно человеку кликать именно в определенное место, чтобы спрятать блоки. Можно кликнуть просто по самому первому блоку, который располагается на весь экран и все спокойно закрывается.

В общем я попробовал повесить закрытие на тот самый блок который выводится на весь экран, но при этом при каких либо действиях внутри внутренних блоках у меня не должно ничего закрываться, вот это у меня и как раз не получается, т.е. теперь у меня все закрывается по клику ВООБЩЕ в любом месте. Вот такая карусель( Подскажите пожалуйста, как это исправить, что я делаю не так?

$("#klik").click(function(){
        $("#klik").hide();
        $("#id1").show();
    });

$("#klik_exit").click(function(){
        $("#id1").hide();
        $("#klik").show();
    });

_____________
[продано копирайтерам]

$("#klik").click(function(){
        $("#klik").hide();
        $("#id1").show();
    });

$("#klik_exit").click(function(){
        $("#id1").hide();
        $("#klik").show();
    });

Это называется модальное окно. Зачем городить огород есть, например, FancyBox. Или я чего-то не понимаю? =)

<div id='backgroundFilter'></div>
//далее твой html

#backgroundFilter { 
background-color: #000000;
display: none;
height: 100%;
left: 0px;
margin: 0px;
opacity: 0.6;
overflow: hidden;
padding: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 1000;
}

$('#backgroundFilter').click(function(){
        $('#backgroundFilter').hide();
        $('#все_ненужные_блоки').hide();
        $('#все_нужные_блоки').show();
     });

<div id='backgroundFilter'></div>
//далее твой html

#backgroundFilter { 
background-color: #000000;
display: none;
height: 100%;
left: 0px;
margin: 0px;
opacity: 0.6;
overflow: hidden;
padding: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 1000;
}

$('#backgroundFilter').click(function(){
        $('#backgroundFilter').hide();
        $('#все_ненужные_блоки').hide();
        $('#все_нужные_блоки').show();
     });