Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.87/15: Рейтинг темы: голосов - 15, средняя оценка - 4.87
24 / 8 / 17
Регистрация: 22.12.2015
Сообщений: 2,061
1

Как добавить рабочий крестик для Pop up?

02.11.2017, 08:46. Показов 3104. Ответов 3
Метки нет (Все метки)

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
 a.tn-atom:hover{
    background: #ffcc00; /* Цвет фона под ссылкой */ 
    color: #000; /* Цвет ссылки */ 
   }
a.tn-atom { 
    text-align: center;
    width: 360px;
    height: 65px; 
    visibility: visible;
    -webkit-font-smoothing: antialiased;
    box-sizing: content-box;
    text-decoration: none;
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    font-size: 24px;
    font-family: 'Open Sans';
    line-height: 1.55;
    font-weight: 400;
    border-width: 0px;
    border-radius: 0px;
    background-color: #f4647a;
    background-position: center center;
    border-color: #2c171c;
    border-style: solid;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
#a{
        width:100%;
        box-sizing: border-box;
}
#b{
    background: #f4647a; /* Цвет фона  */ 
    color: #fff; /* Цвет шрифта */ 
}
#title{
    text-align: center;
    font-size:32px;
       margin-bottom: 11px;
}
#subtitle{
    text-align: center;
    font-size:14px;
}
#ftitle{
    text-align: center;
    font-size:14px;
    line-height: 1.55;
    text-align: center;
}
a{
   color:#ff8562;
   text-decoration:none;
}
 
 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
}
button:hover{
    background: #ffcc00; /* Цвет фона под ссылкой */ 
    color: #000; /* Цвет ссылки */ 
}
/* Стили для содержимого popup окна */
#a{
    border:1px solid black;
}
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: 460px;
  height: 628px;
  background-color: #fff;
  padding: 50px 70px;
  
}

HTML5
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
 <!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>
      <a class="tn-atom"  rel="popup1">Записаться на бесплатный урок</a>
    </div>
    
    <div class="overlay_popup"></div>
    <div class="popup" id="popup1"  >
      <div class="object">
        <form action= "#popup:myform" method= ""> 
         <p id="title">Заполните форму и получите бесплатный пробный урок </p>
         <p id="subtitle">Пробные уроки проходят и в будни и в выходные! </p>
       
          <p>Имя: </p>
          <p><input  id="a" type= "text" name= "name"></p> 
          <p>Телефон: </p>
          <p><input  id="a" type= "text" name= "name"></p> 
          <p>E-mail: </p><p> <input id="a" type= "text" name= "email"></p> 
          <input id="b" type= "submit" value= "Записаться на бесплатный урок">
            <p id="ftitle"><div style="font-size:14px;" data-customstyle="yes">Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c <a href="Politika_obrabotki_PDn_b152.pdf" target="_blank" style="">политикой конфиденциальности</a></div> </p>
        </form>
      </div>
    </div>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script src="scripts.js"></script>
  </body>
</html>

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('.show_popup').click(function() { // Вызываем функцию по нажатию на кнопку 
    var popup_id = $('#' + $(this).attr("rel")); // Связываем rel и popup_id 
    $(popup_id).show(); // Открываем окно
    $('.overlay_popup').show(); // Открываем блок заднего фона
     closeBtnInside: true;
}) 
$('.overlay_popup').click(function() { // Обрабатываем клик по заднему фону
    $('.overlay_popup, .popup').hide(); // Скрываем затемнённый задний фон и основное всплывающее окно
})
    
 
 
$('.tn-atom').click(function() { // Вызываем функцию по нажатию на кнопку 
    var popup_id = $('#' + $(this).attr("rel")); // Связываем rel и popup_id 
    $(popup_id).show(); // Открываем окно
    $('.overlay_popup').show(); // Открываем блок заднего фона
     closeBtnInside: true; 
}) 
$('.overlay_popup').click(function() { // Обрабатываем клик по заднему фону
    $('.overlay_popup, .popup').hide(); // Скрываем затемнённый задний фон и основное всплывающее окно
})
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
02.11.2017, 08:46
Ответы с готовыми решениями:

Как добавить "крестик" для закрытия баннера?
Есть плавающий баннер справа. Если пользователь открывает страницу не в полном окне, баннер...

Добавить функцию в рабочий модуль для отображения кирилицы в СМС. Как?
Есть рабочий модуль стороннего компонента. Компонент успешно отправляет СМС на латинице. Кирилицу...

Добавить логику для работы функции pop и ошибку компилятора в коде: C2109 subscript requires array or pointer type
Задача:Смоделируйте очередь с помощью двух стеков. Добавление элемента в очередь сводится к...

Добавить закрывающий крестик в Popup
возможно ли это, или надо рисовать свой попап?

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
Обучение в Java Mentor с оплатой после трудоустройства
3
24 / 8 / 17
Регистрация: 22.12.2015
Сообщений: 2,061
02.11.2017, 10:09  [ТС] 2
Добавил в
CSS
1
2
3
4
#close{
    margin-left:107%;
    margin-top:-21%;
}
HTML5
1
2
3
4
5
6
    <form action= "#popup:myform" method= ""> 
[B]         <img src="ic_close.png" 
  width="12" height="24" alt="lorem"
  id="close"
  onclick="closew()"
  />[/B]
А,что сюда написать,что бы закрывалось?

Javascript
1
2
3
4
//своя функция  
    function closew() {
//какой то код
}
сам крестик
Название: ic_close.png
Просмотров: 30

Размер: 3.2 Кб
0
85 / 67 / 25
Регистрация: 09.10.2017
Сообщений: 199
02.11.2017, 17:24 3
Здравствуйте!

Ваш код показывает форму методом show() и скрывает форму методом hide().
Также можно дописать в скрипт, чтобы по нажатию на крестик скрывалась форма.

Javascript
1
2
3
$('#close').click(function() { // Вызываем функцию по нажатию на крестик
    $('.overlay_popup, .popup').hide();
})
0
24 / 8 / 17
Регистрация: 22.12.2015
Сообщений: 2,061
02.11.2017, 18:55  [ТС] 4
Цитата Сообщение от TinSemenova Посмотреть сообщение
Также можно дописать в скрипт, чтобы по нажатию на крестик скрывалась форма.
а что бы письмо отправлялось с хостинга
Что дописать?

Добавлено через 1 час 15 минут
считаю лишним и бесполезным фрагментом кода.

Javascript
1
2
3
$('.overlay_popup').click(function() { // Обрабатываем клик по заднему фону
    $('.overlay_popup, .popup').hide(); // Скрываем затемнённый задний фон и основное всплывающее окно
})
закрытие луче так
Javascript
1
2
3
$('#close').click(function() { // Вызываем функцию по нажатию на крестик
    $('.overlay_popup, .popup').close();
})
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
02.11.2017, 18:55

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

Как добавить значки на рабочий стол?
Добрый день! Как добавить значки со store. Например skype на рабочий стол?

Как добавить файл на рабочий стол в GNOME?
Ребят я поставил (да-да) Fedora 19. И не могу понять как создать файл на рабочем столе ?...

Не могу добавить крестик/галочку в форме регистрации
Доброго времени суток. В форме регистрации не могу добавить галочку/крестик при введенных...

Как добавить рабочий стол в меню Alt+Tab?
В Windows 7 в меню ALt+Tab последним окном присутствует рабочий стол (См. Рис. 1). В Windows 10 же...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.