Форум

PEKTOP · #1 (**permalink**) 04.07.2012, 12:56

Встала задача создать оверлей, который бы вел себя подобно оверлею на сайте vk.com. Допустим есть контент большой длинный на странице и по нажанию на определенный объект должен появляться оверлей который бы сократил скрол бар для прокрутки только области видимости оверлея. Я нарисовал схему для наглядности. (137 Kb)
Как мне реализовать такой оверлей?

devote · #2 (**permalink**) 04.07.2012, 14:14

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body {
                padding: 0;
                margin: 0;
                height: 100%;
            }
            .wrapper {
                display: none;
                position: fixed;
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            .wrapper_fon {
                display: none;
                position: fixed;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity: 0.4;
                filter: Alpha(opacity=40);
            }
            .wrapper .overlay {
                position: relative;
                padding: 10px;
            }
            .wrapper .overlay .list {
                width: 400px;
                margin: 0 auto;
                background-color: #fff;
            }
        </style>

        <script type="text/javascript">
            function openOverlay() {
                document.body.style.overflow = 'hidden';

                document.querySelector('.wrapper_fon').style.display = 'block';
                document.querySelector('.wrapper').style.display = 'block';

                return false;
            }
            function closeOverlay() {
                document.body.style.overflow = 'auto';

                document.querySelector('.wrapper_fon').style.display = 'none';
                document.querySelector('.wrapper').style.display = 'none';

                return false;
            }
        </script>

    </head>
    <body>
        <div class="wrapper_fon"></div>
        <div class="wrapper">
            <div class="overlay">
                <div class="list">
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    text<br/>
                    <a href="" onclick="return closeOverlay();">закрыть</a>
                </div>
            </div>
        </div>

        <div>
            <a href="" onclick="return openOverlay();">открыть</a><br/>
            <img src="http://sonicsquad.ucoz.ru/_nw/2/72557.jpg" width="800" height="600" alt="" />
        </div>
    </body>
</html>

ksa · #3 (**permalink**) 04.07.2012, 14:17

PEKTOP, похоже ты придумал новое определение слову "оверлей"...

PEKTOP · #4 (**permalink**) 04.07.2012, 14:51

ksa, я имел ввиду Overlay - наложение.

PEKTOP · #5 (**permalink**) 04.07.2012, 14:52

devote, спасибо за помощь!

ksa · #6 (**permalink**) 04.07.2012, 15:00

Сообщение от PEKTOP

я имел ввиду Overlay - наложение.

Трудный этот русский язык, дорогие граждане! Беда, какой трудный.
Главная причина в том, что иностранных слов в нём до чёрта.
(с) Зощенко
http://www.ostrovok.de/old/classics/...o/story079.htm

DjDiablo · #7 (**permalink**) 04.07.2012, 15:49

В целом согласен с ksa, я даже попробывал перевести на русский

================================================== =

Встала задача создать верхний слой, который бы вел себя подобно верхнему слою, как в месте vk.com. Допустим есть содержимое большой длинны на странице и по нажанию на определенный предмет должен появляться верхний слой который бы сократил полосу прокрутки для прокрутки только области видимости верхнего слоя. Я нарисовал свой замысел для наглядности. (137 Kb)
Как мне реализовать такой верхний слой?

Единственный перевод языка который удалось придумать для java Script это кофесценарии.
А для jQuery это кофеВопросы/кофезапросы (кВопросы/кЗапросы )

Форум

Справочник

Discord чат

Курсы javascript