Всплывающее окно jQuery

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

Создание плавно всплывающего окна
с использованием библиотеки jQuery

В HTML создадим ссылку, блок для контента, крестик для закрытия окна и оверлей для затемнения.

<a class="myLinkModal" href="#">Анкор_ссылки</a>

<div id="myModal">
    <p>Контент</p>
    <span id="myModal__close" class="close">ₓ</span>
</div>
<div id="myOverlay"></div>

Стилизуем всплывающее окно: зададим ему ширину, высоту, цвет, спозиционируем по центру экрана.

#myModal {
    width: 298px; height: 218px;
    padding: 18px 9px;
    border-radius: 4px;
    background: #fafafa;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    display: none;
    opacity: 0;
    z-index: 38;
    text-align: center;
}

Стили кнопки закрытия окна: зададим размеры и спозиционируем в правом верхнем углу.

#myModal #myModal__close {
    width: 21px; height: 21px;
    position: absolute;
    font-size: 29px;
    top: 1px; right: 11px;
    cursor: pointer;
    display: block;
}

Стилизуем затемнение экрана: расположим затемнение на весь экран, цвет чёрный с непрозрачностью 70% и z-index, меньшим, чем у всплывающего окна, чтобы затемнение не перекрывало само окно.

#myOverlay {
    z-index: 37;
    position: fixed;
    background: rgba(0,0,0,.7);
    width: 100%; height: 100%;
    top: 0; left: 0;
    cursor: pointer;
    display: none;
}

jQuery код: отменим стандартное событие по клику на ссылку, зададим плавное затемнение при клике на элемент a.myLinkModal (ссылка с классом myLinkModal), а также добавим плавности для закрытия (будет закрываться при нажатии вне всплывающего окна или на крестик).

$(document).ready(function () {
    $("a.myLinkModal").click(function (event) {
        event.preventDefault();
        $("#myOverlay").fadeIn(297, function () {
            $("#myModal")
                .css("display", "block")
                .animate({ opacity: 1 }, 198);
        });
    });

    $("#myModal__close, #myOverlay").click(function () {
        $("#myModal").animate({ opacity: 0 }, 198, function () {
            $(this).css("display", "none");
            $("#myOverlay").fadeOut(297);
        });
    });
});

К проекту должен быть подключен jQuery.

Отключение автоматического обновления Windows 10 CSS анимация