TWD HUB » TWD SoftWare » разработки js/css
Всплывающее окно при нажатии на объект
Версия: JS-CSS Okna

Внимание! Модули сайта находятся в процессе разработки. Функционал доступен частично.
МЫ НЕ СТОИМ НА МЕСТЕ, А СТАРАЕМСЯ СДЕЛАТЬ САЙТ УНИКАЛЬНЫМ!
Ограничение функций от сервисов Ucoz является помехой,но мы будем искать варианты, ведь многие функции либо скрыты и не запрещены,
либо давно забыты и убраны из списков.
Многое можно осуществить через JS и Json.
Мы ищем решение для добавления большего количества файлов.

Последняя фиксация

@SKYER АВТОР: @SKYER
Создать новый репозиторий.
TWD HUB: 2024-A340S1-0W Что это?
- Идентификатор разработки или скрипта по разным параметрам,
ID, UID, Дате, Группе Пользователя, создавшего этот пост.
Специальная тема.

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

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

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

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

Мы создадим примеры разной сложности, используя JavaScript, воспользовавшись хорошим методомalert().

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

Мы наверное начнем с создания элемента <div> (или любого другого элемента) и его оформления:

Код
<meta charset="utf-8">
<title></title>
<style type="text/css">- стиль самого окна  
  .okno {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  }
</style>
<div class="okno">- место размещения окна Всплывающее окно!</div>

Этот div и будет использоваться в качестве всплывающего окна. Пока кнопка нажатия не работает. Сейчас мы его скрываем с помощью значения none свойства displayи добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:


Код

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <style>
  #okno {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  display: none;
  }
  #okno:target {display: block;}
  </style>
  </head>
   
  <body>
   
  <div id="okno">
  Всплывающее окошко!
  </div>
   
  <a href="#okno">Вызвать всплывающее окно</a>
   
  </body>
</html>

Используя псевдо-класс :target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента < div> сменится с none на block.

Теперь надо расположить < div> посередине страницы, чтобы он стал похож на всплывающее окно. Делаем его абсолютно позиционированным и центрируем его по вертикали и горизонтали:


Код

#okno {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  display: none;
   
  /*----ОКНО ВСПЛЫВАЕТ СТРОГО ПО ЦЕНТРУ----*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент < div> внутри элемента < a>:


Код

<a href="#" id="main">
  <div id="okno">
  Всплывающее окошко!
  </div>
</a>

Затем мы позиционируем элемент < a> и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем нашу ссылку на него:


Код

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <style>
  #main {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }
  #okno {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  }
  #main:target {display: block;}
  </style>
  </head>
   
  <body>
   
  <a href="#" id="main">
  <div id="okno">
  Всплывающее окно!
  </div>
  </a>
   
  <a href="#main">Вызвать всплывающее окно</a>
   
  </body>
</html>

У элемента < div> убираем display: none; (он больше не нужен, так как скрываем мы теперь < a>). В итоге родительский < a> выполняет теперь скрытие всплывающего окна, перенаправляя выбор на страницу.


На этом создание простого всплывающего окна закончено.


Модальное окно


Для создания всплывающего модального окна, берём элемент < div>, оформляем его и добавляем ссылку, при нажатии на которую он будет появляться:


Код
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <style>
  #okno {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  }
  #okno:target {display: block;}
  </style>
  </head>
   
  <body>
   
  <div id="okno">
  Всплывающее окошко!
  </div>
   
  <a href="#okno">Вызвать всплывающее окно</a>
   
  </body>
</html>

Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему < div> и оформив:
Код
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <style>
  #okno {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  }
  #okno:target {display: block;}
  .close {
  display: inline-block;
  border: 1px solid #0000cc;
  color: #0000cc;
  padding: 0 12px;
  margin: 10px;
  text-decoration: none;
  background: #f2f2f2;
  font-size: 14pt;
  cursor:pointer;
  }
  .close:hover {background: #e6e6ff;}
  </style>
  </head>
   
  <body>
   
  <div id="okno">
  Всплывающее окошко!<br>
  <a href="#" class="close">Закрыть окно</a>
  </div>
   
  <a href="#okno">Вызвать всплывающее окно</a>
   
  </body>
</html>

Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный < div>:

Код
<div id="zatemnenie">
  <div id="okno">
  Всплывающее окошко!<br>
  <a href="#" class="close">Закрыть окно</a>
  </div>
</div>

Позиционируем родительский < div> и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.



У дочернего < div> убираем display: none; (он больше не нужен, так как родительский < div> будет скрывать всё, что находится внутри него). В итоге родительский < div> теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:


Код
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <style>
  #zatemnenie {
  background: rgba(102, 102, 102, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  }
  #okno {
  width: 300px;
  height: 50px;
  text-align: center;
  padding: 15px;
  border: 3px solid #0000cc;
  border-radius: 10px;
  color: #0000cc;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: #fff;
  }
  #zatemnenie:target {display: block;}
  .close {
  display: inline-block;
  border: 1px solid #0000cc;
  color: #0000cc;
  padding: 0 12px;
  margin: 10px;
  text-decoration: none;
  background: #f2f2f2;
  font-size: 14pt;
  cursor:pointer;
  }
  .close:hover {background: #e6e6ff;}
  </style>
  </head>
   
  <body>
   
  <div id="zatemnenie">
  <div id="okno">
  Содержимое этого места может быть абсолютно любым!<br>
  <a href="#" class="close">Закрыть окно</a>
  </div>
  </div>
   
  <a href="#zatemnenie">Вызвать всплывающее окно</a>
   
  </body>
</html>


Примечание: если вам нужно, чтобы при заходе на страницу пользователь сразу видел всплывающее окно (а не вызывал его по ссылке), то адрес страницы надо будет прописывать вместе с id окна (например адрес может выглядеть так: site.ru/papka/documet.html#okno).

Уважаемые пользователи!
Копирование новостей разрешено только с указанием ссылки на данную новость на другом сайте.
При обнаружении нарушения будут приняты меры, связанные с защитой авторских прав по пункту законов о плагиате и нарушении авторских прав.
На сайте используются только оригинальные материалы, без копирования из других источников. Все скрипты и коды здесь - наши авторские работы.
Чужие работы мы бережно выносим на отдельные html странички, со ссылками на оригинальный материал. ПРИМЕР
Уважайте чужой труд!
Категория: разработки js/css | Добавил: SKYER | Теги: всплывающее окно, всплывающее окно при наведении, Модальное Окно, окно при наведении на ссылку

Всего комментариев: 0
Войдите:
avatar