JS/jQuery

Модальное окно на затемненном фоне

Для модальных окон есть множество плагинов такие, как fancyboxTwitter Bootstrap и т.д. Но бывают случаи когда нет возможности их использовать, рассмотрим примеры статического окна и всплывающего по клику.
1

Затемнение фона

Для затемнения сайта достаточно добавить в верстку <div> и CSS стили к нему:

<div class="popup-fade"></div>
.popup-fade:before {
    content: '';
    background: #000;
    position: fixed; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    opacity: 0.7;
    z-index: 9999;
}

Стили задаются псевдоклассом :before для того чтобы opacity не влиял на контент, который будет в этом блоке. Полупрозрачный фон будет растянут на все окно браузера.

2

Верстка модального окна

Добавим в div.popup-fade блок с контентом, ссылку «закрыть» и стили для них.

<div class="popup-fade">
    <div class="popup">
        <a class="popup-close" href="#">Закрыть</a>
        <p>Всплывающие окна имеют широкий диапазон применений...</p>
    </div>        
</div>
.popup {
    position: fixed;
    top: 20%;
    left: 50%;
    padding: 20px;
    width: 360px;
    margin-left: -200px;    
    background: #fff;
    border: 1px solid orange;
    border-radius: 4px; 
    z-index: 99999;
    opacity: 1;    
}
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
}
3

События jQuery

$(document).ready(function($) {
    // Клик по ссылке "Закрыть".
    $('.popup-close').click(function() {
        $(this).parents('.popup-fade').fadeOut();
        return false;
    });        

    // Закрытие по клавише Esc.
    $(document).keydown(function(e) {
        if (e.keyCode === 27) {
            e.stopPropagation();
            $('.popup-fade').fadeOut();
        }
    });
    
    // Клик по фону, но не по окну.
    $('.popup-fade').click(function(e) {
        if ($(e.target).closest('.popup').length == 0) {
            $(this).fadeOut();                    
        }
    });    
});
5

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

Для реализации popup-а достаточно скрыть блок .popup-fade и добавить событие для открытия окна.

<a class="popup-open" href="#">Открыть popup</a>

<div class="popup-fade">
    <div class="popup">
        <a class="popup-close" href="#">Закрыть</a>
        <p>Всплывающие окна имеют широкий диапазон применений...</p>
    </div>        
</div>

<style>
.popup-fade {
    display: none;
}
.popup-fade:before {
    content: '';
    background: #000;
    position: fixed; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    opacity: 0.7;
    z-index: 9999;
}
.popup {
    position: fixed;
    top: 20%;
    left: 50%;
    padding: 20px;
    width: 360px;
    margin-left: -200px;    
    background: #fff;
    border: 1px solid orange;
    border-radius: 4px; 
    z-index: 99999;
    opacity: 1;    
}
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
}
</style>

<script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
    $('.popup-open').click(function() {
        $('.popup-fade').fadeIn();
        return false;
    });    
    
    $('.popup-close').click(function() {
        $(this).parents('.popup-fade').fadeOut();
        return false;
    });        

    $(document).keydown(function(e) {
        if (e.keyCode === 27) {
            e.stopPropagation();
            $('.popup-fade').fadeOut();
        }
    });
    
    $('.popup-fade').click(function(e) {
        if ($(e.target).closest('.popup').length == 0) {
            $(this).fadeOut();                    
        }
    });
});
</script>
12 декабря 2018