Затемнение фона
Predator
Дата: Четверг, 14.06.2012, 14:15 | Сообщение # 1
Президент
Министр
Академик
Доктор
Кандидат
Аспирант
Магистр
Бакалавр
Абитуриент
Школьник
Звание: Абитуриент
Группа: Проверенные
Сообщений: 64
Сделал всплывающее модальное окно через стили. Хочу реализовать чтоб когда окно появляется было затемнение фона. Скажите пожалуйста при помощи чего можно релизовать, возможно ли через стили?
STAFF
Дата: Четверг, 14.06.2012, 14:32 | Сообщение # 2
Президент
Министр
Академик
Доктор
Кандидат
Аспирант
Магистр
Бакалавр
Абитуриент
Школьник
-=VIP UcozonGroup=-
Группа: UcozonGroup
Сообщений: 757
Code
background: rgb(0, 0, 0); opacity: .7; filter: alpha(opacity=70);
Сообщение отредактировал STAFF - Четверг, 14.06.2012, 14:32
Predator
Дата: Четверг, 14.06.2012, 14:55 | Сообщение # 3
Президент
Министр
Академик
Доктор
Кандидат
Аспирант
Магистр
Бакалавр
Абитуриент
Школьник
Звание: Абитуриент
Группа: Проверенные
Сообщений: 64
Куда бы не пробовал приписать, везде не то. Подскажите плиз, может здесь нет такого класса куда нужно было прописывать.
.overlay { background-color: rgba(0, 0, 0, 0.6); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 1; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .popup { background: url(../images/fon2.png); display: inline-block; left: 50%; opacity: 0; padding: 15px; position: fixed; text-align: justify; top: 40%; visibility: hidden; z-index: 10; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset; -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s; -o-transition: opacity .5s, top .5s; transition: opacity .5s, top .5s; } .overlay:target+.popup { top: 50%; opacity: 1; visibility: visible; } .close { background-color: rgba(0, 0, 0, 0.8); height: 30px; line-height: 30px; position: absolute; right: 0; text-align: center; text-decoration: none; top: -15px; width: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; font-size: 11px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); } .close:hover { background: rgb(0, 0, 0); } .popup p, .popup div { margin-bottom: 10px; } .popup label { display: inline-block; text-align: left; width: 120px; } .popup input[type="text"], .popup input[type="password"] { border: 1px solid; border-color: #999 #ccc #ccc; margin: 0; padding: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } .popup input[type="text"]:hover, .popup input[type="password"]:hover { border-color: #555 #888 #888; }
STAFF
Дата: Четверг, 14.06.2012, 15:07 | Сообщение # 4
Президент
Министр
Академик
Доктор
Кандидат
Аспирант
Магистр
Бакалавр
Абитуриент
Школьник
-=VIP UcozonGroup=-
Группа: UcozonGroup
Сообщений: 757
Predator , html часть покажите
Сообщение отредактировал STAFF - Четверг, 14.06.2012, 15:07
Predator
Дата: Четверг, 14.06.2012, 15:18 | Сообщение # 5
Президент
Министр
Академик
Доктор
Кандидат
Аспирант
Магистр
Бакалавр
Абитуриент
Школьник
Звание: Абитуриент
Группа: Проверенные
Сообщений: 64
Code
<div class="panel"> <a href="#x" class="overlay" id="login_form"></a> <div class="popup"> <h2>Здравствуй, Гость!</h2> <div> </div> <div> </div> <div style="float:left;"> </div><div style="float:right;"> </div> </form> <a class="close" href="#close"></a> </div>
STAFF
Дата: Четверг, 14.06.2012, 16:08 | Сообщение # 6
Президент
Министр
Академик
Доктор
Кандидат
Аспирант
Магистр
Бакалавр
Абитуриент
Школьник
-=VIP UcozonGroup=-
Группа: UcozonGroup
Сообщений: 757
Predator , В класс panel добавьте код который я написал выше
Predator
Дата: Четверг, 14.06.2012, 16:17 | Сообщение # 7
Президент
Министр
Академик
Доктор
Кандидат
Аспирант
Магистр
Бакалавр
Абитуриент
Школьник
Звание: Абитуриент
Группа: Проверенные
Сообщений: 64
Я тут другим способом пошел, через джава скрипт.Возник следующий вопрос. Code
var value = 0; function setOpacity() { value += .3; var testObj = document.getElementById('test'); testObj.style.width = "100%"; testObj.style.height = "100%"; testObj.style.display = "block"; testObj.style.opacity = value/10; testObj.style.filter = 'alpha(opacity=' + value*10 + ')'; myTimeout = setTimeout("setOpacity()", 1); if ((value/10) >= .5) { clearTimeout(myTimeout); } document.getElementById('warning').style.display = "block"; } function removeOpacity() { value -= .3; var testObj = document.getElementById('test'); myTimeout2 = setTimeout("removeOpacity()", 1); testObj.style.opacity = value/10; testObj.style.filter = 'alpha(opacity=' + value*10 + ')'; if ((value/10) <= 0) { testObj.style.display = "none"; clearTimeout(myTimeout2); } document.getElementById('warning').style.display = "none"; }
Как сделать так чтоб при клике на затемненный фон,он исчезал?
STAFF
Дата: Четверг, 14.06.2012, 17:21 | Сообщение # 8
Президент
Министр
Академик
Доктор
Кандидат
Аспирант
Магистр
Бакалавр
Абитуриент
Школьник
-=VIP UcozonGroup=-
Группа: UcozonGroup
Сообщений: 757
Code
var value = 0; function setOpacity() { value += .3; var testObj = document.getElementById('test'); testObj.style.width = "100%"; testObj.style.height = "100%"; testObj.style.display = "block"; testObj.style.opacity = value/10; testObj.style.filter = 'alpha(opacity=' + value*10 + ')'; myTimeout = setTimeout("setOpacity()", 1); if ((value/10) >= .5) { clearTimeout(myTimeout); } document.getElementById('warning').style.display = "block"; } function removeOpacity() { value -= .3; var testObj = document.getElementById('test'); myTimeout2 = setTimeout("removeOpacity()", 1); testObj.style.opacity = value/10; testObj.style.filter = 'alpha(opacity=' + value*10 + ')'; if ((value/10) <= 0) { testObj.style.display = "none"; clearTimeout(myTimeout2); } document.getElementById('warning').style.display = "none"; } document.body.addEventListener('click', function () { removeOpacity(); }, false);
Сообщение отредактировал STAFF - Четверг, 14.06.2012, 17:30