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

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

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

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

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>
 

Рекламное сообщение
💳 Независимая физическая крипто-карта при партнерстве Pirate Cards!

Вашему вниманию новая крипто-карта для вашей безопасной работы, жизни и снятия наличных денег. Данная карта никак не связана с сервисом Pirate Cards. Мы не видим, что вы оплачиваете и ответственность за свои деньги и действия несете только вы.

🟣 Мы предоставляем вам аккаунт с пройденной верификацией к надежному сервису, где вы можете заказать физическую карту со своими данными. Вам не нужно проходить никаких верификаций, уже все пройдено. Достаточно выпустить карту и ей можно пользоваться. Сразу. Вы можете выпустить виртуальную карту и заказать физическую с доставкой. Пока ваша карта изготавливается, есть возможность добавить карту для оплаты смартфоном.

✅ На карту можно получать деньги в USD через Visa Direct с любого иностранного банка, где есть переводы на иностранные карты. Единственное, эти деньги вы не сможете перевести в криптовалюту, но сможете потратить или снять. Карту можно привязать куда угодно (за исключением РФ сервисов).

➡️ ПОДРОБНЕЕ
 

Не работает ссылка?

Обратите внимание

Назад
Сверху