Программирование Как создать всплывающее окно

task · 3 Ноя 2018

Посоветуйте курс или видео, как создать всплывающее окно при нажатии на кнопку или ссылку.

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

На ютубе смотрел, не понравился материал.

rastfart · 3 Ноя 2018

Вот отличный урок, как раз в тему! Вам понравится!

cont · 4 Ноя 2018

HTML:

<!doctype html>
<head>
<meta charset="utf-8" />
<style>
.overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 99999;
        -webkit-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -ms-transition: opacity .5s;
        -o-transition: opacity .5s;
        transition: opacity .5s;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    width: 300px;
    height: 323px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 999999;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
    border-radius: 11px;
}
.popup .close_window {
    font-size: 13px;
    display: block;
    width: 6px;
    height: 17px;
    position: absolute;
    padding: 1px 9px 4px 9px;
    top: -15px;
    right: -15px;
    cursor: pointer;
    color: #fff;
    font-family: 'tahoma', sans-serif;
    background: -webkit-gradient(linear, left top, right top, from(#3d51c8), to(#051fb8));
    background: -webkit-linear-gradient(top, #3d51c8, #051fb8);
    background: -moz-linear-gradient(top, #3d51c8, #051fb8);
    background: -o-linear-gradient(top, #3d51c8, #051fb8);
    background: -ms-linear-gradient(top, #3d51c8, #051fb8);
    background: linear-gradient(top, #3d51c8, #051fb8);
    background-color: #3d51c8;
    border: 1px solid #061fb8;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
}
.popup .close_window:hover {
    background: -webkit-gradient(linear, left top, right top, from(#051fb8), to(#3d51c8));
    background: -webkit-linear-gradient(top, #051fb8, #3d51c8);
    background: -moz-linear-gradient(top, #ff5f0, #3d51c87);
    background: -o-linear-gradient(top, #051fb8, #3d51c8);
    background: -ms-linear-gradient(top, #051fb8, #3d51c8);
    background: linear-gradient(top, #051fb8, #3d51c8);
    background-color: #051fb8;
    border: 1px solid #00385E;
}
.popup .close_window:active {
    background: #8f9be0;
}
</style>
    <script type="text/javascript" src="http://yandex.st/jquery/1.7.1/jquery.min.js" ></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.popup .close_window, .overlay').click(function (){
                $('.popup, .overlay').css({'opacity':'0', 'visibility':'hidden'});
            });
            $('a.open_window').click(function (e){
                $('.popup, .overlay').css({'opacity':'1', 'visibility':'visible'});
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
<a class="open_window"href="#">ОТКРЫТЬ ОКНО</a>
<div class="overlay" title="окно"></div>
<div class="popup">
<div class="close_window">x</div>
    <p>Тут будет текст</p>
</div>
</body>
</html>

Ailalab · 1 Янв 2025

Бесплатная школа по Арбитражу трафика

Прокачайтесь в арбитраже трафика и научитесь лить в плюс!

Кому подойдет:

Маркетологам и SMM-специалистам. Откроете новый канал трафика: сможете получать лиды по фиксированной цене, которую назначите сами. Узнаете, как находить эффективные связки для продвижения продуктов. Прокачаете свои скиллы, станете компетентным специалистом.
Всем, кто хочет работать в интернете. Научитесь закупать и монетизировать трафик. Узнаете, как тестировать гипотезы и создавать цепляющие рекламные креативы. Сможете работать в интернете и получать дополнительный доход.
Блогерам. Узнаете, как работать с CPA-сетями, привлекать трафик и анализировать его качество. Научитесь выбирать офферы, которые подойдут вашей аудитории и принесут гарантированный доход.

Aila lab | Школа арбитража

atomsolt · 8 Ноя 2018

вот модалка <dialog>: The Dialog element

Программирование Как создать всплывающее окно

task

Premium Lite

rastfart

Premium Lite

cont

Premium Lite

Рекламное сообщение

Ailalab

Pirate Club

atomsolt

Premium Lite

Похожие темы

О нас

Полезные ссылки

Наши контакты

Пользователи онлайн