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

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>

AudiA6_Support · 1 Янв 2024

AudiA6.best - самый известный и медийный обменник теневого интернета с суммарным резервом более 150 млн. рублей, депозитами на авторитетных площадках более 200.000$, работающий с 2020 года 24/7/365.

Самые выгодные курсы, собственный реально работающий миксер с мизерным AML на выходе, профессиональная поддержка и моментальная оперативность выплат.

Сохраняй в закладки: Обмен валют - Audi A6

atomsolt · 8 Ноя 2018

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

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

task

Premium Lite

rastfart

Premium Lite

cont

Premium Lite

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

AudiA6_Support

Support AudiA6 Service

atomsolt

Premium Lite

Похожие темы

О нас

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

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

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