Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Закрытие fancybox2 при нажатии внутри окна

Всем привет
Вообщем казалось бы все просто
нужно что б при клике в любом месте буть то окно, или темный бекграунд, или кнопка закрытия окно закрывалось и все
при клике на кнопку закрыть и на бекграунд все работает как и должно
Для закрытия по нажитию в окне вроде есть свойство
closeClick If set to true, fancyBox will be closed when user clicks the content
Boolean; Default value: false

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

Подскажите как это можно сделать
Ответ: Telnet,
в вашем случае элемент по которому кликают и элемент который нужно открыть это один и тотже элемент получается у клика два обработчика по первому себя закрываем по второму себя открываем
Вопрос: модальное окно, прошу помощи

Добрый день, нужно реализовать закрытие окна после выполнения функции, подскажите пожалуйста как это сделать
$(document).ready(function(){
	//При нажатии на ссылку с классом poplight и href атрибутом тега <a> с #
	$('a.poplight[href^=#]').click(function()
 {
		var popID = $(this).attr('rel'); //получаем имя окна, важно не забывать при добавлении новых менять имя в атребуте rel ссылки
		var popURL = $(this).attr('href'); //получаем размер из href атрибута ссылки
				
		//запрос и переменные из href url
		var query= popURL.split('?');
		var dim= query[1].split('&');
		var popWidth = dim[0].split('=')[1]; //первое значение строки запроса
 
		//Fade in the Popup and add close button
		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Закрыть" class="close"></a>');
		
        //Определяем маржу(запас) для выравнивания по центру (по вертикали и горизонтали) - мы добавляем 80 к высоте / ширине с учетом отступов + ширина рамки определённые в css
		var popMargTop = ($('#' + popID).height() + 80) / 2;
		var popMargLeft = ($('#' + popID).width() + 80) / 2;
		
		//Устанавливаем величину отступа
		$('#' + popID).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
		//Добавляем полупрозрачный фон затемнения
		$('body').append('<div id="fade"></div>'); //div контейнер будет прописан перед тегом </body>.
		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //полупрозрачность слоя, фильтр для тупого IE
		
		return false;
	});
	
	//Зокрываем окно и фон затемнения
	$(document).on('click', 'a.close, #fade', function() { //закрытие по клику вне окна, т.е. по фону...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //плавно исчезают 
    });
    return false;
   });
});
Ответ: Вот что у меня на сайте, я хочу сто бы окна закрывались после выбора функции
Вопрос: Всплывающее окно и расположение элементов

Не могу сделать всплывающее окно при нажатии на кнопку(нужно чтобы выскакивало окно " Ваш заказ принят! Ожидайте трек-код в виде смс на указанный вами номер телефона"
исходный код
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
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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Японские сладости Washoku</title>
    <link rel="stylesheet" type="text/css" href="new 1.css" />
    <style>
        .fig {
            display: block; 
            text-align: center; 
            margin-top: 100px; 
            margin-bottom: 10px; 
        }
        .cite { 
            text-align: center;
            font-size: 0.9em;
            color: #5e5e5b
        }
        .circle {
            width:40px;
            height:40px;
            display:block;
            border-radius:50px;
            -moz-border-radius:50px;
            -webkit-border-radius:50px;
            -khtml-border-radius:50px;
            font-size:20px;
            color:#fff;
            line-height:0px;
            text-align:center;
            background:#a00cb5;
            position:absolute;
            top: 190px;
            left: 170px;
        }
        .circle2 {
            width:40px;
            height:40px;
            display:block;
            border-radius:50px;
            -moz-border-radius:50px;
            -webkit-border-radius:50px;
            -khtml-border-radius:50px;
            font-size:20px;
            color:#fff;
            line-height:0px;
            text-align:center;
            background:#a00cb5;
            position:absolute;
            top: 390px;
            left: 170px;
        }
        .fmorm {
            position: absolute;
            left: 170px;
        }
        .contact_form input {
            height:25px;
            width:130px;
            padding:5px 8px;
        }
        .contact_form2 input {
            height:25px;
            width:435px;
            padding:5px 8px;
        }
        .contact_form textarea {padding:8px; width:300px;}
        .contact_form button {margin-left:156px;}
        .contact_form input, .contact_form textarea {
            border:1px solid #aaa;
            box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
            border-radius:2px;
        }
        .contact_form input:focus, .contact_form textarea:focus {
            background: #fff;
            border:1px solid #555;
            box-shadow: 0 0 3px #aaa;
        }
        .calc{
            width:450px;
            height:550px;
            background:#f4d3ff;
            border:2px dotted #AFAFAF;
            position:absolute;
            top: 200px;
            left:700px;
            text-align: center;
            font-size: 0.9em;
            color: #5e5e5b
        }
        h2 {
    margin-top: 40px;
}
h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83em;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}
        .calc h2 {
    text-align: center;
    margin-bottom: 25px;
    margin-top: 10px;
}
        .one-box {
            display: flex;
            justify-content: center;
            font-weight: 200;
        }
        .one-box .price, .one-box .period, .one-box .save-price {
            text-align: left;
            padding: 0 0 6px 55px;
            width: 134px;
        }
        * {
            box-sizing: border-box;
        }
.calc button {
    background: #fca1d9;
    border: none;
    padding: 20px 40px;
    color: white;
    font-size: 1.5em;
    border-radius: 7px;
    width: 350px;
    margin: 30px auto 0 auto;
    position: absolute;
    top: 150px;
    left:60px;
}
 
input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
button {
    -webkit-appearance: button;
}
 
   .footer-menu li a {
    text-decoration: none;
}
 ul#menu li{
        display:inline-block; /* расположить пункты горизонтально */
        }
 #menu, #menu li {
        margin: 0px; /* убрать внутренние отступы */
        padding: 0px; /* убрать внешние отступы */
 
    }
    #menu li{
        display:inline-block; /* расположить пункты горизонтально */
        text-align: center; /* текст горизонтально по центру */
    }
  #menu a {
        display: block; /* ссылка растягивается на весь пункт li */
        padding: 5px 15px; /* задаем внутренние отступы */
        text-decoration: none; /* убрать нижнее подчёркивание у ссылок */
    position:relative;
    top:100px;
    }
        #cite {
      position:absolute;
      left:300px;
      top:800px;
      }
      /* Базовые стили слоя затемнения и модального окна  */
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
    </style>
</head>
<body bgcolor="#fcefff" onload="slider('slider',0)">
    <header>
        <div class="container">
            <div class="logo-box">
                <a href="new 1.html">
                    <img src="лого.png">
                </a>
            </div>
            <nav>
                <ul>
                    <li><a href="">Как это работает</a></li>
                    <li><a href="">Пример посылок</a></li>
                    <li><a href="">Вопросы и ответы</a></li>
                    <li><a href="заказ.html">Заказать</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="circle">
        <p>1</p>
    </div>
    <p style="color:sienna; margin-left:230px; margin-top:80px; font-family: 'Inpact';  font-size: 30px;font-weight:bolder">Данные получателя:</p>
    <div class="fmorm">
        <form class="contact_form" action="" method="post" name="contact_form">
            <input name="name" placeholder="Укажите вашу фамилию" class="fam" required />
            <input name="emailaddress" placeholder="Укажите ваше имя" class="name" type="email" required />
            <input name="email" placeholder="Укажите ваше Отчество" class="otch" type="em" required /><br><br>
            <input type="date" name="calendar" value=""
            max="2015-06-04" min="1950-05-29">
        </form>
    </div>
    <div class="circle2">
        <p>2</p>
    </div>
    <p style="color:sienna; margin-left:230px; margin-top:170px; font-family: 'Inpact';  font-size: 30px;font-weight:bolder">Адрес получателя:</p>
 
    <div class="fmorm">
        <form class="contact_form" action="" method="post" name="contact_form">
            <input name="str" placeholder="Укажите вашу страну" class="famd" required />
            <input name="emailaddr" placeholder="Укажите ваш город" class="nae" type="emal" required />
            <input name="emailaddrs" placeholder="Укажите ваш индекс" class="oth" type="edm" required /><br><br>
            <input name="emaildrs" placeholder="Укажите ваш адрес" class="othd" type="eddm" required /><br><br>
            <input name="sctr" placeholder="Укажите ваш номер дома" class="famd" required />
            <input name="emailadddr" placeholder="Укажите вашу квартиру" class="nage" type="emahl" required />
            <input name="emaigddrs" placeholder="Укажите ваш корпус" class="ojth" type="eddm" required /><br><br>
            <input name="emaidgddrs" placeholder="Укажите ваш телефон" class="otgh" type="ejm" required />
    </div>
    <div class="calc">
        <h2>Оплата</h2>
        <div class="one-box">
            <div class="info">Цена одной  посылки</div>
            <!-- <div class="price">1439 руб</div> -->
            <div class="price">1489 руб</div>
        </div>
        <div class="one-box">
            <div class="info">Срок подписки</div>
            <div class="period">1 месяц</div>
        </div>
        <div class="one-box">
            <div class="info">Доставка</div>
            <div class="period" id="dostavka">БЕСПЛАТНАЯ</div>
            <button onclick="pay(1);">Оплатить <b id="total_summ">1439 руб</b></button>
        </div>
        </div>
        </form>
</div>
 
 <ul id="menu">
    <li><a href="вопросы.html">Вопросы и ответы</a></li>
    <li><a href="дост.html">Сроки доставки</a></li>
    <li><a href="способ.html">Способы оплаты</a></li>
    <li><a href="контакты.html">Контакты</a></li>
</ul>
 
<div id="cite">
<p align="center"><span style="color:#5e5e5b;font-size:0.9em">© Интернет-магазин "Washoku.ru" Юридический/Почтовый адрес: 171842, г. Удомля, ул. Мюда,<br> 156-5 ИНН 7729732358/КПП 772801001</span></p>
</div>
</body>
</html>
я нашла код для всплывающего окна и подделала чуть под себя ь, но никак не получается связать это с кнопкой
HTML5
1
2
3
4
5
6
7
8
 <a href="#win1" class="button button-green">Открыть окно 1</a>
<a href="#win5"><img title=""  alt="" /></a>
   <a href="#x" class="overlay" id="win1"></a>
   <div class="popup">
 Ваш заказ принят! Ожидайте трек-код в виде смс на указанный вами номер телефона
    <a class="close"title="Закрыть" href="#close"></a>
    </div>
<a class="close" title="Закрыть" href="#close"></a>
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
/* Базовые стили слоя затемнения и модального окна  */
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
/* фон затемнения */
    background-color: rgba(0, 0, 0, 0.65);
    position: fixed; /* фиксированное поцизионирование */
    cursor: default; /* тип курсара */
}
/* активируем слой затемнения */
.overlay:target {
    display: block;
}
/* стили модального окна */
.popup {
    top: -100%;
    right: 0;
    left: 50%;
    font-size: 14px;
    z-index: 20;
    margin: 0;
    width: 85%;
    min-width: 320px;
    max-width: 600px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
    position: fixed;
    padding: 15px;
    border: 1px solid #383838;
    background: #fefefe;
/* скругление углов */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
/* внешняя тень */
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}
/* активируем модальный блок */
.overlay:target+.popup {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
/* формируем кнопку закрытия */
.close {
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 0;
    border: 2px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.8);
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font: 13px/20px 'Tahoma', Arial, sans-serif;
    font-weight: bold;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    -ms-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 12px;
}
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);    
}
/* изображения внутри окна */
.popup img {
    width: 100%;
    height: auto;
}
 
.popup h2 { /* заголовок 2 */
    margin: 0;
    color: #008000;
    padding: 5px 0px 10px;
    text-align: left;
    text-shadow: 1px 1px 3px #adadad;
    font-weight: 500;
    font-size: 1.4em;
    font-family: 'Tahoma', Arial, sans-serif;
    line-height: 1.3;
}
/* параграфы */
.popup p {margin: 0; padding: 5px 0}
И еще проблема с списком "контакты итд". не получается задать ему нужное расположение(нужно чтобы оно было посередине внизу страницы)
помогите пожалуйста, уже завтра зачет и надо все сдать((
Ответ: всем огромное спасибо!
это было задание(сделать тз и сайт по нему) для зачета.
сдала на 5
^^
Вопрос: Popup окно с ротатором новостей

Добрый вечер, надеюсь умные обитатели здешних земель мне смогут подсказать. Проблема в следующем: есть код, который по клике на ссылку выводит popup окно и запускает ротатор новостей. Необходимо, чтобы ротации не было, а был простой переход к следующей и предыдущей новости по клику на картинке стрелки. Ссылка выглядит так:
HTML5
1
<a class="poplight" href="#?w=500" rel="popup_name"></a>
Надеюсь на вашу помощь.
Javascript
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
$(document).ready(function(){
//При нажатии на ссылку с классом poplight и href атрибутом тега <a> с #
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //получаем имя окна, важно не забывать, при добавлении новых, менять имя в атрибуте rel ссылки
        var popURL = $(this).attr('href'); //получаем размер из href атрибута ссылки
 
        //запрос и переменные из href url
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //первое значение строки запроса
 
        //Добавляем к окну кнопку закрытия
        $('#' + popID).fadeIn().css({ 'max-width': Number( popWidth ) }).prepend('<a href="#" title="Закрыть" class="close"></a>');
        $('#' + popID).fadeIn().css({ 'max-width': Number( popWidth ) }).prepend('<a href="#" title="След" class="next"></a>');
        $('#' + popID).fadeIn().css({ 'max-width': Number( popWidth ) }).prepend('<a href="#" title="Пред" class="prev"></a>');
 
        //Определяем маржу(запас) для выравнивания по центру (по вертикали и горизонтали) - мы добавляем 80 к высоте / ширине с учетом отступов + ширина рамки определённые в css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;
 
        //Устанавливаем величину отступа
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });
 
        //Добавляем полупрозрачный фон затемнения
        $('body').append('<div id="fade"></div>'); //div-контейнер будет прописан перед тегом </body>.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //полупрозрачность слоя, фильтр для тупого IE
 
        return false;
    });
 
    //Закрываем окно и фон затемнения
    $(document).on('click', 'a.close, #fade', function() { //закрытие по клику вне окна, т.е. по фону...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //плавно исчезают 
    });
    return false;
   });
});
// Ротатор контента
this.randomtip = function(){
 
    var pause = 5000; // пауза между показом контента (в милесекундах) увеличивая или уменьшая регулируете скорость ротации :)
    var length = $("#tips li").length; 
    var temp = -1;      
 
    this.getRan = function(){
        // получить случайное число
        var ran = Math.floor(Math.random()*length) + 1;
        return ran;
    };
    this.show = function(){
        var ran = getRan();
        // чтобы избежать повторения необходимо проверить,
        while (ran == temp){
            ran = getRan();
        }; 
        temp = ran;
        $("#tips li").hide();   
        $("#tips li:nth-child(" + ran + ")").fadeIn("fast");        
    };
    // инициировать сценарий, а также задать интервал
    show(); setInterval(show,pause);
 
};
 
$(document).ready(function(){   
    randomtip();
});        
</script>
Добавлено через 11 минут
Новости выглядят так:
HTML5
1
2
3
4
5
6
7
8
9
<div id="popup_name" class="popup_block">
<ul id="tips">
    <li><img style="float: left; margin: 0 10px 5px 0;" src="img/about.png" alt="" /> ... Вы смотрите один из примеров создания модального окна с помощью CSS и немного jQuery, с возможностью вставки изображения.</li>
    <li>... В данном примере показано окно шириной 500px.</li>
    <li>...Для вывода других окон просто присваиваете имя новому окну, прописываете в атрибуте <strong>rel</strong>, типа <strong>popup1,2,3</strong> и т.д,</li>
    <li>... и конечно не забываем про идентификатор id, соответственно выставляем такой же.</li>
    <li>... Устанавливаете ширину окна в теге  и c чувством непомерной гордости за себя, любуетесь результатом.</li>
</ul>
</div>
Ответ:
Сообщение от demoniik111
Javascript
1
setInterval(show,pause);
вот эту штуку надо удалить и у вас не будет ротации
Вопрос: Не вызывает всплывающее окно

Добрый день!
Подключил сервис распознавания трафика с соц.сетей(срабатывает при клике по сайту), решил для получения максимальной эффективности сделать всплывающее окно(чтоб его закрывали и шло срабатывание скрипта), но почему-то оно не распознает его закрытие как клик. Только если нажать по фону сайта или картинке идет срабатывание. Думал поможет ли запись в куки решить эту проблему?
Есть всплывающее окно, если использовать:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascriчас pt">
    var delay_popup = 0;
    setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
    //Закрываем окно и фон затемнения
    $(document).on('click', 'a.close, #parent_popup', function() { //закрытие по клику вне окна, т.е. по фону...
    $('#parent_popup , .popup_block').fadeOut(function() {
        $('#parent_popup, a.close').remove();  //плавно исчезают 
    });
    return false;
   });
    
</script>
HTML5
1
2
3
4
5
6
7
8
9
10
<div id="parent_popup">
  <div id="popup">
<center><h1>Заголовок</h1></center>
Текст
<br>
 <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>
 
  </div>
</div>
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
    <!-- Pop-up -->
<style>
    #parent_popup {
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#popup { 
  background: #fff;
    width: 520px;
    margin: 10% 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;
}
/* кнопка закрытия */
.close {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -24px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    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(0, 122, 200, 0.8);
}
 
 
</style>
Добавлено через 10 минут
Добавил куки так:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
$("#setCookie").click(function () {
$.cookie("popup", "", {expires: 0} );
$("#parent_popup").hide();
});
 
if ( $.cookie("popup") == null )
{
    var delay_popup = 0;
    setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
    //Закрываем окно и фон затемнения
    $(document).on('click', 'a.close, #parent_popup', function() { //закрытие по клику вне окна, т.е. по фону...
    $('#parent_popup , .popup_block').fadeOut(function() {
        $('#parent_popup, a.close').remove();  //плавно исчезают 
    });
    return false;
   });
}
else { $("#parent_popup").hide();
}
});
Но окно не высплывает
Ответ: Ребята, я конечно понимаю ирония и все такое, но можно, пожалуйста, по теме.
Вопрос: Модальное окно (Работает на компьютере и в Windows Phone, но не на Android.iOS)

Здравствуйте! Столкнулся со странной ситуацией: скрипт правильно работает на компе и на Windows Phone (!), а на Androi, iOS не правильно.

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

Проблема: на Android и iOS окно пропадает после прокрутки экрана(но не всегда). Работает не предсказуемо.

Вот код:

jQuery(document).ready(function () {

    $(".category-header__title").on("click", function(){
        //Появляется при клике
        var offset = $(this).offset();
        var offsetArrow = $(this).find(".h2-arrow-bottom").offset();


        $(".rubrik__drop-list").css({"display":"block",
                                    "top": offset.top+40,
                                    "left": offset.left });
    })


    $("body").on("click", function (e) {       

        //Закрытие при клике куда угодно , кроме заголовка и самого окна
        if (  ($(e.target).closest(".category-header").hasClass("category-header") == false) &&
              ($(e.target).closest(".rubrik__drop-list").hasClass("rubrik__drop-list") == false)
                     ) {
            $(".rubrik__drop-list").css({"display":"none"});
        }

    })

    //Закрытие при изменении размера окна браузера
    $(window).on("resize", function(){
        $(".rubrik__drop-list").css({"display":"none"});
    })

});
Ответ: Ответ:
Событие resize срабатывает при прокрутке страницы. Почему - не понял. Значение ширины страницы не меняется. И опять же -это происходит на Android и iOS (на Windows Phone все нормально).
Вопрос: Неприятный эффект при закрытии popup окна

Всем привет. Есть . При закрытии любого popup окна в правом верхнем углу появляется и исчезает верхняя панель.

Подскажите где "капнуть", чтобы убрать этот эффект.
Спасибо.
Ответ: Попробуйте в стилях прописать
Код CSS
1
2
3
@media screen and (min-width: 1200px) {
    overflow-x: hidden;
}
Вопрос: Плагин модальнова окна

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

Открывать несколько окон одновременно.
Открывать внешние или внутрение сылки, помимо текста внутри определеных тегов
Настраиваемы дизайн окна
Прокрутка внутри окна
Возможность перемешать окна по экрану.

Я знаю тема не реальна лузерская и такие темы вам на 99% уверен вам уже поднадоели, но я незнаю куда мне больше идти! Если вы знаете какой нибудь плагин хотябы напишите мне его название,а плагин и документацию кнему я сам найду и разберу,во всяком случае попытаюсь это сделать! Заранее балгодарствую, и не пинйте сильно если тема создана не там

(Отредактировано автором: 29 Сентября, 2015 - 18:51:11)

Ответ:
Спасибо, счас посмотрю все
Вопрос: Действие, когда пользователь тянется к закрытию вкладки

Здравствуйте!
Есть задача написать (или подключить уже готовый) скрипт, который бы выполнял определённое действие, когда пользователь тянется к закрытию вкладки.
Подобный функционал реализован вот здесь: - при попытке увести курсор к закрытию вкладки всплывает модальное окно.

Как такое можно реализовать или, возможно, уже есть готовые решения?

Заранее спасибо!
Ответ:
window.onmouseout = function(e) {
  if (e.clientY <= 10) {
  	// TODO
  }
}
Вопрос: Всплывающие окна плагина popup maker на WP

Здравствуйте мастера 2ой день бьюсь с проблемой размытия фона при нажатии на кнопку вызовы всплывающего окна
уже не знаю в какой код лезть, или формы запроса или плагина или темы
на сайте hris.com.ua есть 4 формы заказа
почти внизу сайта кнопка Заказать
подскажите куда что писать что бы при нажатии всплывало окно как сейчас и вместо белого фона сплошного было размытие
Ответ: Описание
Устанавливает размытие элемента, словно он находится не в фокусе.

Синтаксис
filter: progid:DXImageTransform.Microsoft.Blur(параметры)
Параметры
enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
makeShadow
Отображать содержимое элемента как тень. Значение true показывает содержимое как тень, false — исходный вид.
pixelRadius
Радиус размытия от 1 до 100.
shadowOpacity

Устанавливает уровень прозрачности тени, сделанной параметром makeShadow. 0 — полная прозрачность, 1 — непрозрачность элемента.