скроллинг и затемнение экрана
Всем привет!
Сделала затемнение экрана для модального окна, как вы знаете затемнение это еще и блокировка скроллинга. Вроде бы все замечательно, но у меня большое модальное окно, причем внизу есть кнопочки, и вот, когда окно браузера уменьшается,то закрывает часть модального окна...и задача такая, чтобы при уменьшении экрана браузера,появлялся скроллинг именно для модального окна,а не для всего сайта |
покажите, пожалуйста, код в "песочнице"
|
<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]
|
причем див с классом LoadClip должен находиться именно под дивом с id=""OverPage", именно в таком порядке...я пробовала поставить див с классом LoadClip внутри контейнера дива с id=""OverPage", так работает,именно так мне и нужно, но только в таком порядке дивов как в посте 3
|
<!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>
|
не то
мне нужно, чтобы автоматически скроллинг(для ролика) появлялся у окна браузера, когда я уменьшаю его до размера embed, при этом нужно, чтобы фон сайта оставался затемненным и его скроллинг заблокированным |
если вы вставите див с классом LoadClip внутрь контейнера OverPage и откроете его в FF, то увидите наглядно, как при уменьшении окна браузера появляется скроллинг для ролика
|
получается проблема в том, что div c id="container" смещен вниз за счет div c id="LoadClip" из-за этого проблема, а нужно, чтобы не смещался вниз
|
Nailya, решение подобной проблемы
Вариант модального окна с отключением скролинга... |
Не понимаю.
Цитата:
#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;
}
|
| Часовой пояс GMT +3, время: 22:51. |