Как отключить скролл страницы при открытии модального окна

[xoff]

Как сделать что при открытии модального окна пропадал скролл основной страницы а после закрытия снова появлялся, помогите.

И если можно то сделать как нибудь не используя для этого определенный "div id" а то у меня они меняются, я так понимаю это делается с помощью js

html:

<a href="#zakaz" class="buy">Заказать</a>
<div id="zakaz" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close">X</a>
<center><h2>Оформление заказа</h2></center>
</div>
</div>

css:

.modalDialog {
position: fixed;
overflow: auto;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}

.modalDialog > div {
width: 700px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.modalDialog:target {
display: block;
pointer-events: auto;
}

.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }

Edited August 14, 2013 by xoff

[npofopr]

http://arcticlab.ru/arcticmodal/#examples

[xoff]

http://arcticlab.ru/...modal/#examples

Я подключал их скрипт вставлял такой код после закрытия дива своего модального окна:

            <script>
                $('#zakaz_stv-s320').click(function() {
                    var c = $('<div class="modalDialog" />');
                    c.html($('.b-text').html());
                    c.prepend('<a href="#close" title="Закрыть" class="close">X</a>');
                    $.arcticmodal({
                        content: c
                    });
                });

И работает это все относительно плохо, скролл убирается если кликнуть помимо модельного окна (а не при открытии его) а когда закрываю модальное окно скролл на основной странице не появляется, что не так делаю? или надо в файле jquery.arcticmodal-0.3.min.js тоже что-то поменять?

для сравнение вот код с этого сайта

Окно с большой высотой:

var c = $('<div class="box-modal" />');
    c.html($('.b-text').html());
    c.prepend('<div class="box-modal_close arcticmodal-close">X</div>');
    $.arcticmodal({
        content: c
});

_____________________________________________________________

http://habrahabr.ru/post/148515/

Тут есть еще способ с помощью body class="look" может с помощью него кто нибудь поможет реализовать??

Edited August 14, 2013 by xoff

[xoff]

Вот может кто поможет как этот скрипт переделать?

Не знаю как под свое модальное окно подделать - по разному пробую вообще пропадает скролл страницы а нужно только при открывании модального окна

<script>
$("body").css("overflow", "hidden");

$(".close .close_overlay").click(function(){

    $("body").css("overflow", "auto");
});
</script>

[antonKar]

/*стили*/
html {
    overflow-y: scroll;
}

/*Javascript*/
$(".showMePleaseModalWindow").click(function() {

    if ($("div.modalWindow:visible").size() > 0) {

        $("div.modalWindow").css("display","none");
        $("html").css("overflow-y","scroll");

    } else {

        $("div.modalWindow").css("display","block");
        $("html").css("overflow-y","hidden");

    }

});

[xoff]

/*стили*/
html {
    overflow-y: scroll;
}

/*Javascript*/
$(".showMePleaseModalWindow").click(function() {

    if ($("div.modalWindow:visible").size() > 0) {

        $("div.modalWindow").css("display","none");
        $("html").css("overflow-y","scroll");

    } else {

        $("div.modalWindow").css("display","block");
        $("html").css("overflow-y","hidden");

    }

});

куда что свое подставлять? Я сверху свой код выложил

[antonKar]

Я представил общий случай.

Если есть видимое модальное окно, то скрываем его и возвращаем скролл странице. Иначе показываем модальное окно и убираем у страницы скролл.

[xoff]

есть ссылка на открытие модального окна:

<a href="#zakaz" class="buy">Заказать</a>

есть само модальное окно которое открывается по ссылке:

<div id="zakaz" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close">X</a> <-!!!!! ссылка на закрытие модального окна !!!!->
<center><h2>Оформление заказа</h2></center>
</div>
</div>

Есть стили внешнего оформления окна и ссылки закрытия (в первом посту)

Как привязать твой общий пример к моему конкретному?

Edited August 15, 2013 by xoff