Всплывающие окно, центрование и затемнение фона при всплывании

83

l17l

20 июня 2014, 13:16

11060

Здравствуйте, нужна небольшая помощь.

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

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

css всплывающего окна.


#calendarstat {

position:fixed; 

left: 41%;

top: 41%;

background: #FFCCE2;

height: 250px;

width: 280px;

-webkit-box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.71);

-moz-box-shadow:    0px 0px 25px 0px rgba(50, 50, 50, 0.71);

box-shadow:         0px 0px 25px 0px rgba(50, 50, 50, 0.71);

border: solid 3px #F16499;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

text-align: center;

padding:10px;

}

css затемнение фона


.mask {

position: fixed;

top: 0;

left: 0;

z-index: 9990;

width: 100%;

height: 100%;

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

}

если я все это объединяю. то стиль всплывающего окна портиться и оно не понятно где.

I

93

Imitator

20 июня 2014, 13:45

#1

l17l, зачем придумывать велосипед, если на данный момент есть множество приличных готовых библиотек, которые подключил и забыл? А главное - они работают с большинством браузеров и устройств. Лично мне нравится colorbox, хотя аналогов предостаточно.

L

83

l17l

20 июня 2014, 13:59

#2

Imitator:
l17l, зачем придумывать велосипед, если на данный момент есть множество приличных готовых библиотек, которые подключил и забыл? А главное - они работают с большинством браузеров и устройств. Лично мне нравится colorbox, хотя аналогов предостаточно.

хотелось бы без js

L

83

l17l

21 июня 2014, 00:15

#3

html

<div id="calendarstat" style="display:none">
<div id="mask" class="mask"></div>
в разработке
</div>

я запихал маск ну затемнение в саму всплывающею форму, все выходит затемняет, но только оно и окно само затемняет ))) всплывающие.

AF

9

ASDAFF

25 июня 2014, 08:41

#4

Блоки переставь

<div id="mask" class="mask" >

 <div id="calendarstat" style="display:none">

   в разработке

 </div>

</div>

L

83

l17l

25 июня 2014, 10:50

#5

ASDAFF:
Блоки переставь

<div id="mask" class="mask" >

 <div id="calendarstat" style="display:none">

   в разработке

 </div>

</div>

Вообще не то, оно и без клика мне щас все затеминло )

---------- Добавлено 25.06.2014 в 20:55 ----------

ИЗВИНЯЮСЬ ЧТО НЕ ПОЛНЫЙ КОД ВПИХАЛ:

HTML САМОГО ОКНА

Код:

<div id="statprosmotr">
<div class="statpros">
<a href="#" title="Полная статистика просмотров анкеты по дням" onClick="document.getElementById('statprosmotr').style.display='none';document.getElementById('calendarstat').style.display='';return false;">Статистика просмотров</a></div></div>

<div id="calendarstat" style="display:none">
<div id="mask" class="mask"></div>
в разработке

<div class="statprosh">
<a href="#" title="Закрыть статистику" onClick="document.getElementById('calendarstat').style.display='none';document.getElementById('statprosmotr').style.display='';return false;">Закрыть статистику</a></div>
</div>

CSS

Код:

Затемнение фона css

.mask {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}

CSS открыт, закрыть и окна

.statpros a{
font-size: 12px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
}
.statpros a:hover{
color: #000;
}
#calendarstat {
z-index: 9000;
position:fixed;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
background: #FFCCE2;
height: 250px;
width: 280px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.71);
-moz-box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.71);
box-shadow: 0px 0px 25px 0px rgba(50, 50, 50, 0.71);
border: solid 3px #F16499;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
padding:10px;
}
.statprosh a{
margin-top: 240px;
margin-left: -13px;
float:left;
text-align: center;
width: 300px;
text-transform: uppercase;
font-size: 14px;
color: #fff;
cursor:pointer;
height: 32px;
line-height: 29px;
border:3px solid #F06197;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-moz-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-o-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
-khtml-box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
box-shadow: 0px 3px 2px rgba(255, 209, 230, 1);
background: rgb(240,97,151); /* Old browsers */
background: -moz-linear-gradient(top, rgba(240,97,151,1) 0%, rgba(225,58,121,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,97,151,1)), color-stop(100%,rgba(225,58,121,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(240,97,151,1) 0%,rgba(225,58,121,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f06197', endColorstr='#e13a79',GradientType=0 ); /* IE6-9 */
}
.statprosh a:hover{
background: rgb(255, 220, 239);
background: -moz-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -webkit-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -o-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: -ms-linear-gradient(90deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
background: linear-gradient(0deg, rgb(255, 220, 239) 0%, rgb(255, 255, 255) 100%);
color: #000;
}

---------- Добавлено 25.06.2014 в 21:11 ----------

Все я сделал


<div id="statprosmotr">
<div class="statpros">
<a href="#" title="Полная статистика просмотров анкеты по дням" onClick="document.getElementById('statprosmotr').style.display='none';document.getElementById('mask').style.display='';return  false;">Статистика просмотров</a></div></div>
 
<div id="mask" class="mask" style="display:none">  
<div id="calendarstat">
в разработке
 
<div class="statprosh">
<a href="#" title="Закрыть статистику"  onClick="document.getElementById('mask').style.display='none';document.getElementById('statprosmotr').style.display='';return  false;">Закрыть статистику</a></div>
</div>

Затемненный фон остается, когда закрываешь окно ! а еще перекидывает на верх страницы самый !

6

biggo

25 июня 2014, 11:13

#6

это называется лайтбокс. иногда еще называют попап. затемнение называют оверлей

l17l:
хотелось бы без js

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

вот гляньте как тут сделано http://dbmast.ru/files/lightbox/demo.html

Бигго. Конструктор сайтов и интернет-магазинов (http://biggo.pro)

L

83

l17l

25 июня 2014, 11:59

#7

js есть но его мало, это хорошо, главное что бы не гора.

---------- Добавлено 25.06.2014 в 22:04 ----------

biggo:
это называется лайтбокс. иногда еще называют попап. затемнение называют оверлей

нормальный лайтбокс без js вы не сделаете. хотя если чисто для обучения, то можно заморочиться
вот гляньте как тут сделано http://dbmast.ru/files/lightbox/demo.html

я не пойму как там на тему перейти, а то демку только смотрю!

37

John Smith

25 июня 2014, 12:08

#8

l17l:
я не пойму как там на тему перейти, а то демку только смотрю!

Используйте силу "исходного кода страницы", юный ОбиВан. 🙅

L

83

l17l

25 июня 2014, 12:34

#9

а этот вариант по лучше будет http://dbmast.ru/modalnye-vsplyvayushhie-okna-s-pomoshhyu-css3-bez-javascript

---------- Добавлено 25.06.2014 в 22:45 ----------

<div id="mask" class="mask" style="display:none">

<div id="calendarstat">в разработке

<div class="statprosh"> <a href="#" title="Закрыть статистику"

onClick="document.getElementById('mask').style.display='none';document.getElementById('statprosmotr').style.display='';returnfalse;">Закрыть статистику</a></div>

так работает, а как сделать что бы на верх не перекидывало ! после нажатия закрыть. окно

S3

303

Sly32

25 июня 2014, 13:38

#10

У меня на сайте вывод формы запроса реализован примерно так как вы хотите - http://www.trutravel.ru/otdyx-v-belarusi/testovaya/ Нажмите на кнопку [Подобрать коттедж]. Если нравится - скину код

Маркетинг для шоколадной фабрики. На 34% выше средний чек

Open AI тестирует память для ChatGPT