Модальное окно с помощью CSS и jQuery

Предлагаю вашему вниманию пример создания модального окна с помощью CSS и jQuery. Модальное окно с сообщением появляется сразу после загрузки страницы.

Для закрытия окна необходимо нажать на клавиатуре клавишу Esc или кликнуть по кнопке размещенной в сообщении модального (popup) окна.

Изменяя в скрипте значение

 e.keyCode 

можно назначить любую клавишу (или несколько клавиш) на клавиатуре для закрытия модального окна. Виртуальные коды клавиш можно узнать тут.

Для работы необходимо обязательно подключить библиотеку jQuery.

Посмотреть и скачать демо пример вы можете ниже.

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

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi necessitatibus deleniti corporis iste accusantium porro illo ducimus repellat aliquid eveniet at veniam quisquam ea error explicabo, nulla quibusdam, rerum amet rem esse, omnis nostrum voluptatibus culpa. <a href="#">Quidem natus iure</a>, voluptates unde blanditiis autem doloremque fugit sint distinctio. Fugit reprehenderit, magnam maxime, tempora quaerat obcaecati nam earum sunt quae quidem rem tenetur molestiae, nesciunt eius excepturi laudantium distinctio fugiat doloremque expedita! Saepe possimus sapiente debitis culpa. Natus, voluptatum voluptatem minima, accusamus, perferendis quod deleniti nesciunt tenetur eaque eveniet et, ea rerum totam recusandae ab earum ipsa dolorum quaerat. Molestiae, neque, incidunt.</p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>. Nisi necessitatibus deleniti corporis iste accusantium porro illo ducimus repellat aliquid eveniet at veniam quisquam ea error explicabo, nulla quibusdam, rerum amet rem esse, omnis nostrum voluptatibus culpa. Quidem natus iure, voluptates unde blanditiis autem doloremque fugit sint distinctio. Fugit reprehenderit, magnam maxime, tempora quaerat obcaecati nam earum sunt quae quidem rem tenetur molestiae, nesciunt eius excepturi laudantium distinctio fugiat doloremque expedita! Saepe possimus sapiente debitis culpa. Natus, voluptatum voluptatem minima, accusamus, perferendis quod deleniti nesciunt tenetur eaque eveniet et, ea rerum totam recusandae ab earum ipsa dolorum quaerat. Molestiae, neque, incidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi necessitatibus deleniti corporis iste accusantium porro illo ducimus repellat aliquid eveniet at veniam quisquam ea error explicabo, nulla quibusdam, rerum amet rem esse, omnis nostrum voluptatibus culpa. Quidem natus iure, voluptates unde blanditiis autem doloremque fugit sint distinctio. Fugit reprehenderit, magnam maxime, tempora quaerat obcaecati nam earum sunt quae quidem rem tenetur molestiae, nesciunt eius excepturi laudantium distinctio fugiat doloremque expedita! Saepe possimus sapiente debitis culpa. Natus, voluptatum voluptatem minima, <a href="#">accusamus</a>, perferendis quod deleniti nesciunt tenetur eaque eveniet et, ea rerum totam recusandae ab earum ipsa dolorum quaerat. Molestiae, neque, incidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi necessitatibus deleniti corporis iste accusantium porro illo ducimus repellat aliquid eveniet at veniam quisquam ea error explicabo, nulla quibusdam, rerum amet rem esse, omnis nostrum voluptatibus culpa. Quidem natus iure, voluptates unde blanditiis autem doloremque fugit sint distinctio. Fugit reprehenderit, magnam maxime, tempora quaerat obcaecati nam earum sunt quae quidem rem tenetur molestiae, nesciunt eius excepturi laudantium distinctio fugiat doloremque expedita! Saepe possimus sapiente debitis culpa. Natus, voluptatum voluptatem minima, accusamus, perferendis quod deleniti nesciunt tenetur eaque eveniet et, ea rerum totam recusandae ab earum ipsa dolorum quaerat. Molestiae, neque, incidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi necessitatibus deleniti corporis iste accusantium porro illo ducimus repellat aliquid eveniet at veniam quisquam ea error explicabo, nulla quibusdam, rerum amet rem esse, omnis nostrum voluptatibus culpa. Quidem natus iure, voluptates unde blanditiis autem doloremque fugit sint distinctio. Fugit reprehenderit, magnam maxime, tempora quaerat obcaecati nam earum sunt quae quidem rem tenetur molestiae, nesciunt eius excepturi laudantium distinctio fugiat doloremque expedita! Saepe possimus sapiente debitis culpa. Natus, voluptatum voluptatem minima, accusamus, perferendis quod deleniti nesciunt tenetur eaque eveniet et, ea rerum totam recusandae ab earum ipsa dolorum quaerat. Molestiae, neque, incidunt.</p>

CSS

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800");
*, *:before, *:after {
 box-sizing: border-box;
}

body {
 margin: 50px;
 font-family: 'Open Sans', sans-serif;
 font-size: 14pt;
 color: #333;
 line-height: normal;
 text-align: justify;
 font-smooth: always;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

p {
 margin-top: 50px;
}

a {
 color: dodgerblue;
 text-decoration: none;
}

#overlay {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 350px;
 height: 150px;
 padding: 25px;
 margin: auto;
 border-radius: 5px;
 background: white;
 display: table;
 box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
 font-family: 'Open Sans', sans-serif;
 font-size: 12pt;
 color: #333;
 line-height: normal;
 text-align: justify;
 font-smooth: always;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
#overlay p {
 height: 30px;
 display: table-cell;
 vertical-align: middle;
 line-height: 30px;
 text-align: center;
}
#overlay p i {
 cursor: pointer;
 height: 30px;
 padding: 0 10px;
 margin: 0 10px;
 border-radius: 3px;
 background: #ddd;
 display: inline-block;
 box-shadow: 0 2px #bbb;
 color: #999;
}

JS

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript">
var input = '<p>Нажмите <i>esc</i> для закрытия.';
$(function(){
 $('body').css({ overflow: 'hidden', 'pointer-events': 'none' });
 $('html').append('<div id="overlay">' + input +'</div>');
 $('html').keydown(function(e){
 if ( e.keyCode == 27 ) {
 $('body').css({ overflow: 'auto', 'pointer-events': 'auto' });
 $('#overlay').fadeOut(300);
 }
 console.log(e);
 });
 var e = $.Event('keydown',{keyCode: 27});
 $('#overlay i').on('click',function(){
 $('html').trigger(e);
 });
});
</script>