Форум

Nailya · #1 (**permalink**) 30.09.2013, 14:17

Всем привет!

Сделала затемнение экрана для модального окна, как вы знаете затемнение это еще и блокировка скроллинга. Вроде бы все замечательно, но у меня большое модальное окно, причем внизу есть кнопочки, и вот, когда окно браузера уменьшается,то закрывает часть модального окна...и задача такая, чтобы при уменьшении экрана браузера,появлялся скроллинг именно для модального окна,а не для всего сайта

BETEPAH · #2 (**permalink**) 30.09.2013, 14:36

покажите, пожалуйста, код в "песочнице"

Nailya · #3 (**permalink**) 30.09.2013, 14:53

<body>
	<div id="OverPage"></div>
	<div class="LoadClip">
		<object class="Clip">
			<param value="Belissimo.swf" name="movie">
			<embed src="Belissimo.swf">
		</object>
	</div>
<div id="container">	
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
</div>

[CSS]
html,body{
	margin:0px;
	padding:0px;
	height:100%;
	overflow:hidden;
	}
#container{
	width:100%;
	height:100%;
	overflow:auto;
}
#OverPage{
	position:fixed;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	overflow:auto;
	opacity:0.5;
	background:#fff;
}

embed{
	width:800px;
	height:800px;
}
[/CSS]

Nailya · #4 (**permalink**) 30.09.2013, 14:59

причем див с классом LoadClip должен находиться именно под дивом с id=""OverPage", именно в таком порядке...я пробовала поставить див с классом LoadClip внутри контейнера дива с id=""OverPage", так работает,именно так мне и нужно, но только в таком порядке дивов как в посте 3

BETEPAH · #5 (**permalink**) 30.09.2013, 15:24

<!DOCTYPE HTML>
<html>
  <head>
  <style>
  html,body{
	margin:0px;
	padding:0px;
	height:100%;
	overflow:hidden;
	}
.container{
	width:100%;
	height:100%;
	overflow:auto;
}
.OverPage{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow:auto;
	opacity:0.5;
	background:#000;
    z-index: -1;
}
.LoadClip {
    overflow: auto;
        width: 300px;
        height: 150px;
}
embed{
	width:800px;
	height:800px;
}  
  </style>
  </head>
  <body>
	<div class="OverPage"></div>
	<div class="LoadClip">
		<object class="Clip">
			<param value="Belissimo.swf" name="movie">
			<embed src="Belissimo.swf">
		</object>
	</div>
<div class="container">	
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
	текст скрыт<br>
</div>

  </body>
</html>

Nailya · #6 (**permalink**) 30.09.2013, 15:49

не то

мне нужно, чтобы автоматически скроллинг(для ролика) появлялся у окна браузера, когда я уменьшаю его до размера embed, при этом нужно, чтобы фон сайта оставался затемненным и его скроллинг заблокированным

Nailya · #7 (**permalink**) 30.09.2013, 15:54

если вы вставите див с классом LoadClip внутрь контейнера OverPage и откроете его в FF, то увидите наглядно, как при уменьшении окна браузера появляется скроллинг для ролика

Nailya · #8 (**permalink**) 30.09.2013, 16:20

получается проблема в том, что div c id="container" смещен вниз за счет div c id="LoadClip" из-за этого проблема, а нужно, чтобы не смещался вниз

рони · #9 (**permalink**) 30.09.2013, 16:37

Nailya, решение подобной проблемы
Вариант модального окна с отключением скролинга...

BETEPAH · #10 (**permalink**) 30.09.2013, 16:41

Не понимаю.

Сообщение от Nailya

получается проблема в том, что div c id="container" смещен вниз за счет div c id="LoadClip" из-за этого проблема, а нужно, чтобы не смещался вниз

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

#LoadClip {
    height: 100px;
    overflow: auto;
    position: absolute;
    width: 300px;
    z-index: 2;
}

#OverPage {
    background: none repeat scroll 0 0 #000000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

Форум

Справочник

Discord чат

Курсы javascript