<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 2.0

PHP и MySQL с Нуля до Гуру 2.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 11 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

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

Почти к каждому уроку идут упражнения.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Всплывающее окно. Pop-up на jQuery.

Всплывающее окно. Pop-up на jQuery.

На данный момент ни один современный, качественный сайт не может обойтись без использования JavaScript. Этот язык даёт очень многое, модифицирует и делает лучше любой проект. Но писать на чистом JS порой бывает трудно и долго. Для значительного облегчения объёма работы и времени потраченного на неё, была создана библиотека jQuery. Сегодня мы рассмотрим пример использования jQ, и сделаем всплывающее окно (довольно полезное и красивое дополнение к сайту).

Для начала напишем HTML код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Popup Show</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="content">
      <button class="show_popup blue_btn" rel="popup1">Отправить письмо</button>
    </div>
    <div class="overlay_popup"></div>
    <div class="popup" id="popup1">
      <div class="object">
        <form action= "" method= "">
          <p>Имя: </p>
          <p><input type= "text" name= "name"></p>
          <p>E-mail: </p><p> <input type= "text" name= "email"></p>
          <p>Сообщение: </p>
          <p><textarea rows= "10" cols= "45" name= "message"></textarea></p>
          <input type= "submit" value= "Отправить">
        </form>
      </div>
    </div>
    <script src="jquery/jquery-1.11.2.min.js"></script>
    <script src="scripts.js"></script>
  </body>
</html>

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

textarea {
  width: 100%;
  resize: none;
}

/* Ставим кнопку по центру */

.content {
  text-align: center;
}

/* Стили для нашей кнопки */

button {
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 22px;
  text-decoration: none;
  margin: 20px;
  color: #fff;
  position: relative;
  display: inline-block;
  cursor: pointer;
  border: 0;
}

button:active {
  transform: translate(0px, 5px);
  -webkit-transform: translate(0px, 5px);
  box-shadow: 0px 1px 0px 0px;
}

button:focus {
  outline: none !important
}

/* Стили для содержимого popup окна */

input, textarea {
  color: #494949;
  border: 1px solid #e3e3e3;
  border-radius: 3px;
  background: #fff;
  font-size: 14px;
  margin: 0 0 10px;
  padding: 5px;
  width: 100%;
  font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

input:focus {
  border-color: #808080;
  outline: none;
}

textarea:focus {
  border-color: #808080;
  outline: none;
}

/* Кнопка */

.blue_btn {
  background-color: #55acee;
  box-shadow: 0px 5px 0px 0px #3C93D5;
}

/* Окно */

.overlay_popup {
  display:none;
  position:fixed;
  z-index: 999;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background:#000;
  opacity:0.5;
}

.popup {
  display: none;
  position: relative;
  z-index: 1000;
  margin:0 25% 0 25%;
  width:50%;
}

/* Ещё немного стилей для popup окна */

.object{
  width: 500px;
  height: 500px;
  background-color: #eee;
  padding: 50px 70px;
}

Отлично! Красивая кнопка, приличный блок (pop-up окно) и пока что, бесполезный блок с затемнением. Осталось написать только небольшой кусок кода - и всё прекрасно!

$('.show_popup').click(function() { // Вызываем функцию по нажатию на кнопку
    var popup_id = $('#' + $(this).attr("rel")); // Связываем rel и popup_id
    $(popup_id).show(); // Открываем окно
    $('.overlay_popup').show(); // Открываем блок заднего фона
})
$('.overlay_popup').click(function() { // Обрабатываем клик по заднему фону
    $('.overlay_popup, .popup').hide(); // Скрываем затемнённый задний фон и основное всплывающее окно
})

Готово! Всё прекрасно работает, красиво на вид, и очень полезно! Результат работы можно посмотреть здесь: Pop-up окно на jQuery

Задавайте вопросы и высказывайте своё мнение в комментариях!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.