[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Задний фон в моадльном окне
Форум PHP программистов > Дизайн и верстка
Ramzil_Nixon
18.02.2012 - 14:46
А как в CSS сделать полупразрачное окно, чтобы при открытии модального окна весь фон стала немного темнее, а то тут в примере понять не могу.

body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#e3edf3;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}




Спустя 2 минуты, 45 секунд (18.02.2012 - 13:49) TranceIT написал(а):
Вы делаете всплывающее окно при котором основной контент затемняется?

Спустя 33 минуты, 11 секунд (18.02.2012 - 14:22) nugle написал(а):
Ramzil_Nixon
свойство opacity

Спустя 43 секунды (18.02.2012 - 14:23) Ramzil_Nixon написал(а):
TranceIT, да. вот только понять не могу как затемнить

Спустя 32 секунды (18.02.2012 - 14:23) Ramzil_Nixon написал(а):
nugle, а можно небольшой пример?

Спустя 9 минут, 48 секунд (18.02.2012 - 14:33) nugle написал(а):
вот тут есть примеры.
http://htmlbook.ru/css/opacity
Твоя задача при открытии модального окна, поверх всего задать фон и задать ему свойство opcity

Спустя 7 минут, 31 секунда (18.02.2012 - 14:41) Ramzil_Nixon написал(а):
nugle
Цитата (nugle @ 18.02.2012 - 11:33)
вот тут есть примеры.
http://htmlbook.ru/css/opacity
Твоя задача при открытии модального окна, поверх всего задать фон и задать ему свойство opcity

Этот топик я прочитал уже. мне надо всплывающее окно при котором основной контент затемняется.

Вот эту фигню я понять не могу

Спустя 3 минуты, 8 секунд (18.02.2012 - 14:44) TranceIT написал(а):
Поверх контента создается блок шириной и высотой равными высоте и ширине окна браузера. Поверх него уже верстка окна. Причем окно не должно быть дочерним элементом затемняющего окна, т.к. свойство opacity применяется для всех дочерних элементов. Т.е. если у родителя opacity 0.5, то в дочерних элементах невозможно выставить opacity больше, чем у родителя.

А далее уже дело техники. Либо блокируем scroll, либо делаем затемняющее окно высотой во всю стр и по скроллу смещаем форму.

Спустя 6 минут, 18 секунд (18.02.2012 - 14:50) Ramzil_Nixon написал(а):
TranceIT

Вот у меня есть такое построение
<div id="boxes">
	<div id="dialog" class="window">
		Простое модальное окно | 
		<a href="#"class="close"/>Закрыть его</a>
	</div>
</div>

Спустя 8 минут, 10 секунд (18.02.2012 - 14:58) TranceIT написал(а):
Я делал так:

<div class="shadow">
    // Затемняющий блок
</div>
<div class="window">
    // Всплывающее окно
</div>
<div class = "content"> 
    // Контент, т.е основной блок в <body>
</div>


Блоки shadow и window в исходнике отсутствовали и добавлялись при помощи jquery по событию. Оба с абсолютным позиционированием. Размеры первого на js, позиция по центру второго тоже на js.

Спустя 2 минуты, 58 секунд (18.02.2012 - 15:01) Ramzil_Nixon написал(а):
TranceIT, в твоем случае shadow какие значения принимает? ohmy.gif

Спустя 1 минута, 34 секунды (18.02.2012 - 15:03) nugle написал(а):
Ramzil_Nixon
ставишь размеры окна для width и height, фон белый или серый цвет + свойство opacity

Спустя 2 минуты, 22 секунды (18.02.2012 - 15:05) Ramzil_Nixon написал(а):
nugle, щас попробую

Спустя 4 минуты, 44 секунды (18.02.2012 - 15:10) Ramzil_Nixon написал(а):
Если делаю так:

<div id="boxes">
</div>
<div id="dialog" class="window">
	Простое модальное окно | 
	<a href="#"class="close"/>Закрыть его</a>
</div>


У меня этот окно вообще не исчезает.

Спустя 2 минуты, 1 секунда (18.02.2012 - 15:12) redreem написал(а):
дарю:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>123</title>
	<script type="text/javascript" src="jquery162.js"></script>
	
<style type="text/css">	
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, td 
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent} body {line-height:1} ol, ul {list-style:none} blockquote, q {quotes:none} blockquote:before, blockquote:after, q:before, q:after {content:'';content:none}
:focus {outline:0} ins {text-decoration:none}del {text-decoration:line-through} 
img {border:0;outline:0}
html,body {width:100%;color:#fff;font:16px Arial;margin:0}
body {background-color:#0e0e0f}

/* ---- стили структуры ---- */
#globalcanva {position:relative;width:980px;margin:0 auto;min-height:500px;z-index:0;background:#8f8;margin-top:12px;}
#header {position:relative;width:100%;height:60px;z-index:1;background:#4a4}
#footer {position:relative;width:100%;height:180px;margin-top:12px;background:#4a4}

/* ---- модальные окна ---- */
#modalWins {width:100%;height:100%;position:absolute;left:0;top:0;z-index:20000;display:none}
#modalMuar {background:#0e0e0f;width:100%;height:100%;position:absolute;left:0;top:0;z-index:0;display:none}
.modalWin {position:relative;margin:0 auto;z-index:10;color:#fff;display:none}

#myModalWin1 {background:#fff;width:700px;height:340px;margin-top:100px;display:none;padding-left:60px;color:#000}

</style>	
		
</head>
<body id="bodyId">

<!-- modals -->
<div id="modalWins">
	<div id="modalMuar"> </div>
	<div id="myModalWin1">
		Я — модальное окно
	</div>
</div>

<!-- content -->
 <div id="header">Я — хидер</div>
 <div id="globalcanva">
	Я — контент
	<input type="button" onclick="modalWin.show('myModalWin1')" value="Показать модальное окно" />
</div>
<div id="footer">Я — футер</div>

<script type="text/javascript">
	doc = document;
	var modalWin = {
		hControlId:'bodyId',
		muarId:'modalMuar',
		muarEl:false,
		containerId:'modalWins',
		containerEl:false,
		el:false,
		prepareStyle:{opacity:0,display:'block',zIndex:20000},
		time:{
			show:{
				modal:200,
				muar:200
			},
			hide:{
				modal:200,
				muar:200
			}
		},
		show:function(elId) {
			if (typeof elId=='string') this.el=doc.getElementById(elId); else this.el = elId;
			this.containerEl = doc.getElementById(this.containerId);
			
			var h = doc.getElementById(this.hControlId).offsetHeight;
			
			$(this.el).css(modalWin.prepareStyle);
			$(this.el).addClass('modalWin');
			
			this.muarEl = doc.getElementById(this.muarId);
			this.muarEl.style.height = h+'px';
			this.muarEl.onclick=function(){modalWin.hide();};
			$(this.muarEl).css(modalWin.prepareStyle);

			$(this.containerEl).css({display:'block',height:h});
			
			$(this.muarEl).animate({opacity:0.9},modalWin.time.show.muar);
			$(this.el).animate({opacity:1},modalWin.time.show.modal);
		},
		hide:function() {
			$(this.el).animate({opacity:0},modalWin.time.hide.modal,function(){
				$(modalWin.el).css({display:'none'});
				$(modalWin.containerEl).css({display:'none'});
			});
			$(this.muarEl).animate({opacity:0},modalWin.time.hide.muar,function() {
				$(modalWin.muarEl).css({display:'none',height:0});
			});
		}
	};
</script> 
</body>
</html>

Спустя 10 минут, 20 секунд (18.02.2012 - 15:22) Ramzil_Nixon написал(а):
redreem, ух зубрить-то сколько, ну ладно спасибо огромное laugh.gif

Спустя 1 минута, 31 секунда (18.02.2012 - 15:24) nugle написал(а):
Ramzil_Nixon
ну ты код покажи, как ты закрываешь

Спустя 3 минуты, 22 секунды (18.02.2012 - 15:27) Ramzil_Nixon написал(а):
nugle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Демо</title>
<style>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#e3edf3;
}

#boxes #dialog1 {
  width:375px; 
  height:203px;
}

#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}

#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}
</style>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>

$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		$('#mask, .window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

</script>


</head>

<body>
<ul>
<li><a href="#dialog" name="modal">Простое модальное окно</a></li>
<li><a href="#dialog1" name="modal">Форма для логина</a></li>
<li><a href="#dialog2" name="modal">Красивая липучка</a></li>
</ul>


<div id="boxes">

<div id="dialog" class="window">

Простое модальное окно | 
<a href="#"class="close"/>Закрыть его</a>
</div>
  
<!-- НАчало формы логина -->  
<div id="dialog1" class="window">
  <div class="d-header">
    <input type="text" value="username" onClick="this.value=''"/><br/>
    <input type="password" value="Password" onClick="this.value=''"/>    
  </div>
  <div class="d-blank"></div>
  <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>

</div>
<!-- конец -->  



<!-- Начало красивого стикера -->
<div id="dialog2" class="window">
  Вот так все красиво!! <b>Ruseller.com</b> - всегда только лучшая информация<br/><br/>
<input type="button" value="НУ НАЖМИТЕ МЕНЯ!!!" class="close"/>
</div>
<!-- конец -->



<!-- Макска, которая затемняет весь экран -->
  <div id="mask"></div>

</div></body>
</html>


вот это скачанный исходник

Спустя 47 минут, 57 секунд (18.02.2012 - 16:15) nugle написал(а):
Ramzil_Nixon
а самому написать никак?
я не вижу тут исправлений с opacity


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

user posted image
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.