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

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

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

1	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

Данный метод для того кому лень качать и заливать на сайт. У кого же он есть можно заменить адрес атрибута src

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

<a href="#modal" class="button openModal">Ссылка</a>
	<div id="modal" class="modal">
		<div>
			<div class="text">
				текст
			</div>
 <a href="#close" title="Закрыть">Закрыть</a>

<a href="#modal" class="button openModal">Ссылка</a>

<div>

текст

</div>

<a href="#close" title="Закрыть">Закрыть</a>

После того как вы все выполнили останется к CSS коду добавить оформление окна. Кто знаком с Css может отредактировать как ему надо, все подписано. Единственное что мне понадобилось отредактировать это размер окна он подписан комментариями «СОДЕРЖАНИЕ», где я параметры width (ширина) и height (высота) поменял на свое.

/* Контейнер */
.modal {

/* Слой перекрытия */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;

/* Трансформации прозрачности при открытии  */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;

/* Скрываем изначально */
opacity: 0;
pointer-events: none;
}

/* Показываем модальное окно */
.modal:target {
opacity: 1;
pointer-events: auto;
}

/* Содержание */
.modal > div {
width: 950px;
height:550px;
background: #ffffff;
position: relative;
margin: 10% auto;

/* По умолчанию минимизируем анимацию */
-webkit-animation: minimise 500ms linear;

/* Придаем хороший вид */
padding: 30px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
text-shadow: 0 1px 0 #fff;
}

/* Изменяем анимацию при открытии модального окна*/
.modal:target > div {
-webkit-animation-name: bounce;
}

.modal h2 {
font-size: 36px;
padding: 0 0 20px;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale3d(0.1,0.1,1);
    -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
    -webkit-transform: scale3d(1.08,1.08,1);
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
    -webkit-transform: scale3d(0.95,0.95,1);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
    -webkit-transform: scale3d(1,1,1);
    -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
    -webkit-transform: scale3d(1,1,1);
  }
  100% {
    -webkit-transform: scale3d(0.1,0.1,1);
  }
}

/* Ссылка на кнопку Закрыть */
.modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}

/* Сбрасываем изменения */
.modal a[href="#close"]:focus {
outline: none;
}

/* Создаем кнопку Закрыть */
.modal a[href="#close"]:after {
content: 'X';
display: block;

/* Позиционируем */
position: absolute;
right: -10px;
top: -10px;
width: 20px;
padding: 1px 1px 1px 2px;

/* Стили */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #ffffff;
border: 3px solid #ffffff;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}

.modal a[href="#close"]:focus:after {
outline: 0px solid #000;
}

/* Открываем модальное окно */
a.openModal {

}

a.openModal:hover,
a.openModal:focus {
}

.modal .modal_title {
  display: block;
  text-align: center;
  font-size: 22pt;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

/* Контейнер */

.modal {

/* Слой перекрытия */

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,0.5);

z-index: 10000;

/* Трансформации прозрачности при открытии */

-webkit-transition: opacity 500ms ease-in;

-moz-transition: opacity 500ms ease-in;

transition: opacity 500ms ease-in;

/* Скрываем изначально */

opacity: 0;

pointer-events: none;

}

/* Показываем модальное окно */

.modal:target {

opacity: 1;

pointer-events: auto;

}

/* Содержание */

.modal > div {

width: 950px;

height:550px;

background: #ffffff;

position: relative;

margin: 10% auto;

/* По умолчанию минимизируем анимацию */

-webkit-animation: minimise 500ms linear;

/* Придаем хороший вид */

padding: 30px;

-moz-border-radius: 7px;

border-radius: 7px;

-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);

-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);

box-shadow: 0 3px 20px rgba(0,0,0,0.9);

text-shadow: 0 1px 0 #fff;

}

/* Изменяем анимацию при открытии модального окна*/

.modal:target > div {

-webkit-animation-name: bounce;

}

.modal h2 {

font-size: 36px;

padding: 0 0 20px;

}

@-webkit-keyframes bounce {

0% {

-webkit-transform: scale3d(0.1,0.1,1);

-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);

}

55% {

-webkit-transform: scale3d(1.08,1.08,1);

-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);

}

75% {

-webkit-transform: scale3d(0.95,0.95,1);

-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);

}

100% {

-webkit-transform: scale3d(1,1,1);

-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);

}

@-webkit-keyframes minimise {

0% {

-webkit-transform: scale3d(1,1,1);

}

100% {

-webkit-transform: scale3d(0.1,0.1,1);

}

/* Ссылка на кнопку Закрыть */

.modal a[href="#close"] {

position: absolute;

right: 0;

top: 0;

color: transparent;

}

/* Сбрасываем изменения */

.modal a[href="#close"]:focus {

outline: none;

}

/* Создаем кнопку Закрыть */

.modal a[href="#close"]:after {

content: 'X';

display: block;

/* Позиционируем */

position: absolute;

right: -10px;

top: -10px;

width: 20px;

padding: 1px 1px 1px 2px;

/* Стили */

text-decoration: none;

text-shadow: none;

text-align: center;

font-weight: bold;

background: #000;

color: #ffffff;

border: 3px solid #ffffff;

-moz-border-radius: 20px;

border-radius: 20px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

box-shadow: 0 1px 3px rgba(0,0,0,0.5);

}

.modal a[href="#close"]:focus:after,

.modal a[href="#close"]:hover:after {

-webkit-transform: scale(1.1,1.1);

-moz-transform: scale(1.1,1.1);

}

.modal a[href="#close"]:focus:after {

outline: 0px solid #000;

}

/* Открываем модальное окно */

a.openModal {

}

a.openModal:hover,

a.openModal:focus {

}

.modal .modal_title {

display: block;

text-align: center;

font-size: 22pt;

}

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

Будьте первым, кто оставит комментарий

Добавить комментарий Отменить ответ