<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

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

Подписавшись по 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):

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