Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Как сделать всплывающее окно

Исходник

Всплывающие окна это одно из самых распространенных явлений на многих сайтах и не зря, так как это очень удобно и практично для решения некоторых конкретных моментов. Например, это может быть всплывающая при нажатии форма заказа или авторизации, вообще это очень распространено в социальных сетях, интернет магазинах и т.д.

В этом уроке я вам подробно расскажу, как сделать всплывающее окно своими руками при этом, не сломав себе мозг, и получив качественный и практичный результат. Вот то что мы сегодня будем делать:

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

Да и это на самом деле очень удобно и практично. Сделать сайт непросто, а если сделать все красиво с удобным функционалом, то безусловно ваш сайт получит большие плюсы и улучшит юзабилити, благодаря простому попапу. И так от слов к делу, сделать попап можно достаточно легко, всю эту несложную процедуру мы можем реализовать по средствам не мало известной связки html+css+jquery.

Собственно давайте все по порядку для начала пойдем по html коду и вот что мы должны получить:

<html>
<head>
<title>Как сделать всплывающее окно на Jquery</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="windows-1251">
<meta http-equiv="content-language" content="ru">
</head>
<body>
<div>
<div class="box"> Пример всплывающего окна</div>
<div class="popup">
 <div class="popup-content"> Поздравляю вы сделали всплывающее окно!!! </div>
</div>
</div>
</body>
</html>

Давайте разбираться, что мы сделали, мы сделали блок с текстом и блок с самим попапом и его содержанием, теперь давайте посмотрим что нам необходимо сделать в css:

.box {
width: 400px;
height: 300px;
background-color: #ccc;
margin:0px auto;
padding:10px;
font-size:40px;
color: #fff;
}
.popup {
width:100%;
min-height:100%;
background-color: rgba(0,0,0,0.5);
overflow:hidden;
position:fixed;
top:0px;
}
.popup .popup-content {
margin:40px auto 0px auto;
width:200px;
height: 80px;
padding:10px;
background-color: #c5c5c5;
border-radius:5px;
box-shadow: 0px 0px 10px #000;
}

Итак, первый у нас блок с просто с текстом и ему мы назначили класс box, в этом классе мы задали ширину width: 400px; контейнера, высоту height: 300px;, цвет фона серый background-color: #ccc; , далее убрали внешние отступы и центровали блок margin:0px auto;, затем задали внутренние отступы, установили размер шрифта font-size:40px; и цвет белый color: #fff;. С первым блоком все переходим ко второму.

Здесь в принципе свойства у нас похожие, так как наш попап будет выходить и затенять всю страницу мы выставляем ширину 100% и благодаря свойству min-height:100%; мы задали минимальную высоту, далее мы задали свойство отображения блок только внутри элемента остальное будет скрыто overflow:hidden;, прописали фиксированную позицию с нулевым отступом от верха.

И последний блок само тело нашего всплывающего окна, это .popup-content, внешний отступ сверху 40 пикселей параметрами auto выравниваем его по центру margin:40px auto 0px auto;, задаем ширину и высоту width:200px; height: 80px;, внутренний отступ padding:10px;, цвет фона background-color: #c5c5c5;, закругляем углы border-radius:5px, и делаем тень box-shadow: 0px 0px 10px #000;.

Так с CSS мы разобрались, здесь я думаю все было просто и понятно, теперь давайте перейдем непосредственно к Jquery коду который собственно говоря и даст нам возможность сделать всплывающее окно. Для начала создайте файл с разрешением .js в моем случае я сделал script.js и поместите в него следующий код:

$(document).ready(function(){
PopUpHide();
});
function PopUpShow(){
$("#window-popup").show();
}
function PopUpHide(){
$("#window-popup").hide();
}

Что нам дал данный код, в нем прописано три функции, первая скрывает попап при загрузке страницы, вторая показывает его, и третья опять таки скрывает. Здесь больше нет ни каких сложностей осталось нам лишь изменить html код и все наше всплывающее окно готово. Итак код меняем следующим образом:

<html>
<head>
<title>Как сделать всплывающее окно на Jquery</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta charset="windows-1251">
<meta http-equiv="content-language" content="ru"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
<div class="box"> Пример всплывающего окна<br>
<a href="javascript:PopUpShow()">Показать попап</a>
</div>
<div class="popup" id="window-popup">
 <div class="popup-content"> Поздравляю вы сделали всплывающее окно!!!  <a href="javascript:PopUpHide()">Скрыть попап</a>
</div>
</div>
</div>
</body>
</html>

Что изменилось, а изменилось следующее, мы подключили библиотеку Jquery:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>

И добавили две ссылки показать и скрыть попап. Вот и все теперь вы можете загрузить все три файла, на ваш сайт и все будет работать, при нажатии на ссылку попап будет появляться и так же исчезать. Это очень удобный и несложный инструмент, который вы можете применять на своем сайте, где вам удобно и соответственно изменять его так как вам удобно.

Дата публикации:2014-02-03


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget