Всплывающее окно css – Всплывающее окно (Модальное окно) на CSS при клике по ссылке или через указанное время

Содержание

Всплывающее окно на CSS | Step For Top

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

 

.parent_popup, .parent_popup_click {

  background-color: rgba(0, 0, 0, 0.8);

  display: none;

  position: fixed;

  z-index: 99999;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}

.popup, .popup_click {

  background: #fff;

    max-width: 600px;

    width:70%;

    margin: 5% auto;

padding: 5px 20px 13px 20px;

border: 10px solid #ddd;

position: relative;

/*--CSS3 CSS3 Тени для Блока--*/

-webkit-box-shadow: 0px 0px 20px #000;

-moz-box-shadow: 0px 0px 20px #000;

box-shadow: 0px 0px 20px #000;

/*--CSS3 Закругленные углы--*/

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

 

 

.popup h3, .popup_click h3 {

    font:28px Monotype Corsiva, Arial;

    font-weight: bold;

text-align: center;

color: #008000;

text-shadow: 0 1px 3px rgba(0,0,0,.3);

}

.popup h4, .popup_click h4 {

    font:24px Monotype Corsiva, Arial;      

color: #008000;

text-align: left;

text-shadow: 0 1px 3px rgba(0,0,0,.3);

}

/* кнопка закрытия */

.close {

    background-color: rgba(0, 0, 0, 0.8);

border: 2px solid #ccc;

    height: 24px;

    line-height: 24px;

    position: absolute;

    right: -24px;

cursor: pointer;

    text-align: center;

    text-decoration: none;

color: rgba(255, 255, 255, 0.9);

    font-size: 14px;

    font-family: helvetica, arial;

    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);

    top: -24px;

    width: 24px;

-webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    -ms-border-radius: 15px;

    -o-border-radius: 15px;

    border-radius: 15px;

-moz-box-shadow: 1px 1px 3px #000;

-webkit-box-shadow: 1px 1px 3px #000;

box-shadow: 1px 1px 3px #000;

}

.close:hover {

    background-color: rgba(255, 69, 0, 0.8);

}

Всплывающее модальное окно на чистом CSS

Модальные окна очень часто используются вебмастерами на сайтах, потому что очень удобны, и помогают пользователю сконцентрировать все внимание на нужном контенте. Обычно для использования модального окна на WordPress сайте устанавливаются такие плагины как Fancybox, Lightbox и другие подобные. Но бывают случаи, когда необходимо отказаться от jQuery и

добавить модальное окно на сайт с помощью CSS.

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

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

1. Скачайте CSS файл стилей

Для начала вам необходимо скачать CSS файл с необходимыми стилями по ссылке ниже.

Скачать файл стилей

2. Подключите файл стилей в header.php

Загрузите скачанную папку в корневой каталог вашего сайта. Затем подключите этот файл, добавив следующую строку в файле header.php:

<link rel="stylesheet" type="text/css" href="/modal/style.css" />

3.  Добавьте кнопку для вызова модального окна

Затем в нужное место на сайте нужно добавить кнопку для вызова модального окна. Кнопкой является стандартная ссылка, обязательно с классом openModal. Код кнопки будет примерно следующим:

<a href="#modal">Открыть модальное окно</a>

4. Добавьте содержимое модального окна

После этого добавьте  блок с содержимым модального окна. Содержимое может быть абсолютно любым:

<div>
    <div>
       <div>Любое содержимое модального окна</div>
        <a href="#close" title="Закрыть">Закрыть</a>
    </div>        
</div>

DIV блок с содержимым модального окна можно разместить в файле single.php или в footer.php.

Остались вопросы?

Если у вас остались вопросы или есть чем дополнить - выражайтесь в комментариях.

Подписывайтесь и получайте полезные статьи на почту!

Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery

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

Хочу сказать что эти плагины сейчас стали довольно популярными. Естественно — очень удобно, красиво и современно.  Но найти то что нужно, оказывается, не так то уж и просто. И вот с огромной надеждой, что Вы найдёте себе что нужно, представляю Вам эту бесплатную подборку с этими замечательными JQuery плагинами.

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

Простое модальное окно с красивым эффектом

Пример ι Скачать исходники

Красивое модальное окно с использованием CSS и JQuery

Пример ι Скачать исходники

Простое окно для форм на сайте

Пример ι Скачать исходники

Простое JQuery модальное окно для любого контента

Пример ι Скачать исходники

Не сложное всплывающее окно с использованием JQuery

Пример ι Скачать исходники

Светлое модальное окно с текстом

Пример ι Скачать исходники

CSS3 окна — semantic

Пример ι Скачать исходники

Простое модальное окно, которое появляется при входе на сайт

Пример ι Скачать исходники

JQuery плагин всплывающих окон как в FaceBook — LightFace

Пример ι Скачать исходники

Красивые модальные окна с JQuery

Пример ι Скачать исходники

Несколько всплывающих окон

Пример ι Скачать исходники

Простое модальное окошко с CSS и JQuery

Пример ι Скачать исходники

Как сделать всплывающее окно с затемнением

Вы здесь: Главная - CSS - CSS Основы - Как сделать всплывающее окно с затемнением

Как сделать всплывающее окно с затемнением

Очень часто бывает нужно вывести пользователю какую-нибудь информацию или предложение в отдельном окне. Поскольку такая информация будет максимально легко доходить до посетителей. Однако, если использовать JavaScript для вывода обычных окон, то их будет блокировать браузер. Я решил рассказать о том, как сделать всплывающее окно с затемнением с использованием только HTML и CSS.

Я сразу приведу код, а потом немного его прокомментирую:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#parent_popup {
  background: #000;
  height: 100%;
  opacity: 0.9;
  position: fixed;
  width: 100%;
  z-index: 100;
  top: 0;
  left: 0;
}
#popup {
  background-color: #00f;
  height: 200px;
  position: fixed;
  top: 100px;
  left: 40%;
  color: #f00;
  width: 300px;
}
</style>
</head>
<body>
<h2>Сайт</h2>
<h2>Сайт</h2>
<h2>Сайт</h2>
<h2>Сайт</h2>
<h2>Сайт</h2>
<h2>Сайт</h2>
<h2>Сайт</h2>
<h2>Сайт</h2>
<h2>Сайт</h2>
<div>
  <div>
    <p>Закрыть</p>
    <p>Текст в окне</p>
  </div>
</div>
</body>
</html>

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

h2 будет обычный контент на Вашем сайте.

Блок parent_popup занимается затемнением (background-color и opacity), а также выводится поверх всего остального контента (z-index: 100;).

А блок popup - это непосредственно само окно. Мы задаём его положение (top и left), а также делаем его fixed для того, чтобы он перемещался вместе с прокруткой страницы.

И, наконец, в коде есть текст "закрыть", кликнув по которому, окно будет закрыто. Это единственное место, где используется JavaScript.

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

  • Как сделать всплывающее окно с затемнением Создано 13.04.2012 13:37:53
  • Как сделать всплывающее окно с затемнением
    Михаил Русаков
Предыдущая статья Следующая статья

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

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

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

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

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

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

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

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

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

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

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

Всплывающее окно при входе на сайт на CSS3

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

 

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

Шаг 1. HTML

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

<div>

<div>

<a href="#">&#10006;</a>

<h4>Добро пожаловать</h4>

<p>Краткое описание</p>

<p>Полный текст в окне.</p>

<a href="#">Продолжить</a>

</div>

</div>

Также мы добавили несколько кнопок, которые будут оживать при наведении курсора мыши, это позволит добавить большего реализма и оживить наше окно.

Всплывающее окно при входе на сайт на CSS3

Шаг 2. CSS

Нам необходимо определить параметры контейнера, кроме этого мы стилизуем наш контейнер заливкой цвета, и добавлением кнопок. Мы добавили для фона размытие, ведь нам необходимо отвлечь внимание и приковать его к окну:

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

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

.cover {

height: 100%;

width: 100%;

position: absolute;

z-index: 1;

}

 

.blur-in {

-webkit-animation: blur 2s forwards;

-moz-animation: blur 2s forwards;

-o-animation: blur 2s forwards;

animation: blur 2s forwards;

}

 

.blur-out {

-webkit-animation: blur-out 2s forwards;

-moz-animation: blur-out 2s forwards;

-o-animation: blur-out 2s forwards;

animation: blur-out 2s forwards;

}

 

@-webkit-keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

 

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

}

 

@-moz-keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

 

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

}

 

@-o-keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

 

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

}

 

@keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

 

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

}

 

@-webkit-keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

 

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

}

 

@-moz-keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

 

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

}

 

@-o-keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

 

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

}

 

@keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

 

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

}

 

.content {

width: 650px;

margin: 0 auto

Отправить ответ

avatar
  Подписаться  
Уведомление о