На многих сайтах можно встретить различные всплывающие формы, как правило это форма обратной связи.
Итак, как же создать простое всплывающее окно с затемненным задним фоном? Рассмотрим пример, в котором при клике на кнопку будет выводиться текст: "На лабутенах", в всплывающющем окне. Чтобы закрыть это окно надо будет нажать на крестик или на затемненный фон.
Вообщем для реализации этого примера не так много и нужно.
Пишем html код, по сути в нем будет только наша кнопка и окно с текстом, которое будет появляться при нажатие на кнопку.
<input type="button" value="Узнать в какой она обуви" id="btn" /> <div class="okno"> <span class="close">X</span> На лабутенах </div>
Затем надо прописать стили для нашей кнопки и всплывающей формы. В стилях мы укажем, что по умолчанию форма не видна, т.е. поставим у нее "display:none;", также надо будет прописать стили для затемненного фона.
<style> #btn { display: block; margin: 10px; border: none; background: pink; padding: 10px; font-weight: bold; border-radius: 10px; cursor: pointer; } .okno{ display:none; background: #fff; z-index: 2222; position: absolute; text-align: center; padding: 55px; width: 300px; left: 30%; } .fon{ display: block; position: fixed; top: 0; background: #000; width: 100%; height: 100%; z-index: 222; opacity: 0.5; cursor: pointer; } .close{ display: block; position: absolute; top: -10px; right: -10px; background: #fff; border-radius: 100%; padding: 10px; font-weight: bold; cursor: pointer; } </style>
После чего, необходимо написать скрипт который будет отвечать за открытие и закрытие всплывающего окна. Тут тоже на мой взгляд все просто, мы указываем изменение стилей формы ("display:block;") при клике на кнопку и создаем новый блок div, который является нашим задним фоном.
<script> //появление и закрытие формы $(document).ready(function () { $("#btn").click(function () { $(".okno").css("display","block"); d = document.createElement('div'); d.className='fon'; document.body.appendChild(d); }); $(".fon,.close").click(function () { $(".okno").css("display","none"); $('.fon').remove(); }); }); </script>
Разберем подробнее наш скрипт:
В строчке $(".okno").css("display","block"); - открывается окно.
В строчке d = document.createElement('div'); - создается новый div элемент.
В строчке d.className='fon'; - присваивается класс созданному элементу.
В строчке document.body.appendChild(d); - вставляется элемент в наш html код.
Код который идет ниже этой строчки отвечает за закрытие и удаления div элемента с классом "fon".