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

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

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

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

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 Numbers - Надежные и Безопасные номера для приема SMS/Звонков на длительный срок

✅ Преимущества нашего сервиса:
  • 💸 Низкая стоимость аренды номеров для такого качества услуг;
  • 🤝 Прямое соглашение с операторами (гарантирует оперативное решение возникших вопросов);
  • 🌎 Доступно большинство стран мира;
  • 📲 Номер активен 24/7;
  • 📬 Мгновенное перенаправление SMS-сообщений на ваш Telegram/E-mail/Телефон;
  • 📞 Возможность подключения номера для принятия голосовых сообщений/звонков в Telegram (поддерживается не во всех странах);
  • 🕒 Круглосуточная поддержка;
  • 💰 Скидки при долгосрочной аренде и постоянным клиентам;
➡️ Подробнее
 

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

Назад
Сверху