Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов

Создаем собственное всплывающее окно на javascript, css и jQuery. Какой способ выбрать?

Доброго времени суток всем читателям данной статьи. Если для своего веб-сервиса вам необходимо сделать всплывающее окно, то вы нашли правильную публикацию! Сегодня я расскажу вам как создается всплывающее окно JavaScript, css и jQuery инструментами.

В статье подробно будут рассмотрены 3 варианта написания всплывающих окон с затемненным фоном и в конце проведен анализ каждого способа. Любой понравившийся код из представленных примеров вы сможете впоследствии использовать в своих программах. А теперь за дело!

Нет, ну скажите, зачем оно вообще нужно!?

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

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

popup окно

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

Не могу промолчать и о третьем способе использования всплывающих окон. Это спам и реклама.

Начнем с простого

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

Итак, сама разметка веб-страницы вмещается в несколько строк, потому что весь сок состоит в правильной стилизации.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Popup window</title>
</head>
<body>
<a href="#b" id="button">Нажми на меня</a>
<a href="#x" class="overlay" id="b"></a>
   <div class="window">
     <img src="http://www.sunhome.ru/UsersGallery/Cards/prazdnik_den_zemli_kartinka.jpg"/> 
    <a class="close" title="Закрыть" href="#close"></a>
    </div>
</body>
</html>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<style>
/*Затемнение дисплея*/
.overlay {
    background-color: rgba(1, 0, 0, 0.77);
    right: 0;
    left: 0;
    position: fixed; 
    top: 0;
    bottom: 0;
    z-index: 11;
    display: none;
}
/*Слой становится видимым*/
.overlay:target {
    display: block;
}
/*Растягиваю картинку на всю ширину попапа*/
.window img { 
   width: 100%;
}
/*Характеристики самого окна, которое появляется после клика на кнопке*/
.window {
    left: 50%;
    z-index: 12;
    margin: 0;
    position: fixed;
    padding: 15px;
    border: 1px solid #383738;
    background: #fefeff;
    border-radius: 15px;
    box-shadow: 0 13px 21px rgba(0,1,0,.19),0 21px 63px rgba(0,1,0,.31);
    transform: translate(-50%, -450%);
    transition: transform 0.6s ease-out;
}
/*Появление модального окошка с верхнего края экрана*/
.overlay:target+.window {
    transform: translate(-50%, 0);
    top: 17%;
}
/*Внешний вид кнопки «Закрыть»*/
.close {
    top: -11px;
    right: -11px;
    width: 23px;
    height: 23px;
    position: absolute;
    padding: 0;
    border: 2px solid #ccd;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.81);
    box-shadow: 0 0 12px #010;
    text-align: center;
    text-decoration: none;
    font: 18px sans-serif;
    font-weight: bold;
    transition: all ease .9s;
}
.close:before {
    color: rgba(254, 254, 254, 0.89);
    content: "X";
    text-shadow: 0 1px 3px #010;
    font-size: 14px;
}
/*Изменение характеристик при наведении на область */
.close:hover {
    background-color: rgba(253, 21, 0, 0.83);
    transform: rotate(360deg);    
}
/*Оформление главной кнопки*/
#button {
  margin-left: 40%;
font-size: 33px;
  border-radius: 11px;
    background-color: rgba(63, 63, 63, 0.9);
    box-shadow: 0 3px 10px #010;
    text-align: center;
    text-decoration: none;
   background: #DCDCDC; 
    padding: 6px 17px; 
}
</style>

Возможности JavaScript

В скриптовом языке встроено множество возможностей создавать всплывающие окна. Так, попапы можно вызвать при помощи стандартных функций alert, confirm и prompt.

Alert выводит простое сообщение пользователю. В прошлых публикациях я много раз использовал этот метод. Закрыть такое окно можно нажав крестик или «OK». Синтаксис выглядит следующим образом:

alert («Вот мое послание!»);

Confirm необходим для задания вопроса пользователям. Такое окошко часто можно встретить при выходе с сайта или проверке какой-либо информации о вас. К примеру:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
   <script>
    var text = confirm("Какой-то текстовый контент. Вы все прочли?");
  </script>
</head>
<body>
</body>
</html>

Если в появившееся окно стандартного вида можно ввести какую-то информацию, то это prompt.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
  <script>
   var isLogIn= prompt('Вы подписчик?', '');
alert('Ответ: '+isLogIn);
  </script>
</body>
</html>

Помимо этого, в js у window существует метод, который позволяет загружать новые страницы и открывать новые окна. Это

window.open (“путь”, “наименование”, “параметры”)

Данный метод обладает множеством встроенных параметров. Если есть желание их разобрать, то откройте официальную документацию. А я перейду сразу к простому примеру.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> window on js</title>
</head>
<body>
  <script>
    var PopUpW = window.open("", "PopUp Window", "resizable=no,scrollbars=no,width=350,height=150,copyhistory=1");
    PopUpW.document.write("Много-много текстового контента!");
  </script>  
</body>
</html>

Благодаря такому коду всплывающее окно будет появляться сразу после загрузки страницы. Заметьте, что параметры нужно перечислять через запятую и обязательно без пробелов.

Работа с jQuery

Ну вот мы и добрались до библиотеки js – jQuery. Для реализации описываемого подхода я написал две функции на jq, которые отвечают за появление окна и за его закрытие.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
/*открываю попап*/
$(document).ready(function() { 
	$('a#start').click( function(event){ 
		event.preventDefault(); 
		$('#overlay').fadeIn(250, 
		 	function(){
				$('#popUp') 
					.css('display', 'block') 
					.animate({opacity: 1, top: '55%'}, 490); 
		});
	});
/*по нажатию на крестик закрываю окно*/
	$('#close, #overlay').click( function(){ 
		$('#popUp')
			.animate({opacity: 0, top: '35%'}, 490, 
				function(){ 
					$(this).css('display', 'none'); 
					$('#overlay').fadeOut(220); 
				}
			);
	});
});
</script>
<style>
#popUp {
        top: 12%; 
	left: 50%; 
	height: 200px;
	position: fixed;
	width: 300px;  
	border-radius: 11px;
	background: #fef; 
	margin-left: -150px;	
	margin-top: -100px;
	display: none; 
	opacity: 0;
	padding: 17px;
	z-index: 6;
}
#popUp #close {
cursor: pointer;
	position: absolute;
	width: 23px;
	height: 23px;
	top: 17px;
	right: 17px;
	display: block;
}
#overlay {
	z-index:4; 
	background-color:#010; 
	position:fixed; 
	opacity:0.86;
	width:100%; 
	height:100%;
	display:none; 
	top:0;
	left:0;
}
</style>
</head>
<body>
<a href="#" id="start">Нажми на ссылку</a>
<div id="popUp">
      <span id="close">X</span>
      <h1>Какое-то предложение!</h1>
</div>
<div id="overlay"></div>
</body>
</html>

Что лучше?

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

Поэтому экспериментируйте, изучайте новые способы реализации и не забывайте подписываться на мой блог. Я всегда рад новым подписчикам! До встречи! Пока-пока!

С уважением, Роман Чуешов

Прочитано: 12747 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Иван

    Привет. css не работает. Почему блок который должен появиться постоянно виден.

    22.05.2019 в 21:35
  • Иван

    Точнее css не работает когда его вставляешь в контент.

    22.05.2019 в 21:42
    • Роман

      Ну, не знаю! Попробуйте другой способ — JavaScript, например...

      25.05.2019 в 14:25