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

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>

os · 26 Сен 2024

Клубы Web-Master, Traffic (Instagram, Google, Яндекс) и Нейросети вновь доступны для всех желающих!

Что изменилось:

Клуб Web-Master совмещен с клубом по Трафику. Теперь вы получаете доступ сразу ко всем материалам всех тематических клубов. В клубе по трафику вы получаете доступ к блокам по Instagram (+ серые/черные ниши), Яндекс и Google. Материалы доступны для изучения сразу. Больше нет необходимости покупать эти направления по отдельности. Вступаете и изучаете только то, что вам нужно.
В совмещенных клубах появилась собственная биржа заказов.
До вступления в клуб теперь доступна бесплатная 15-минутная консультация с куратором.
Направление открыто до конца года, возможно, закроем немного раньше. С 2025 года мы полностью убираем эти направления для новых пользователей.
Стоимость доступа к совмещенным клубам - 150 + 100 USD.
Текущие пользователи клубов Веб-мастер и Трафик получат возможность присоединиться к соседнему клубу по отличным условиям.
Стоимость доступа клуба по нейросетям осталась, как и была. В клубе сейчас почти 200 участников. Совсем скоро появится блок по нейро-музыке, на который участники клуба получат 50% скидку. После выхода блока в свет, общая стоимость клуба по нейросетям повысится.

ПОДРОБНОСТИ

atomsolt · 8 Ноя 2018

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

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

task

Premium Lite

rastfart

Premium Lite

cont

Premium Lite

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

os

Администратор

atomsolt

Premium Lite

Похожие темы

О нас

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

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

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