Создание модального?

Я создаю свою собственную модальность, вот мой CSS:Создание модального?

.modal{ 

    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    z-index: 999; 

    .modal-content{ 
     margin: 60px auto; 
     background-image:url('/static/img/background-modal.jpg'); 
     width: 700px; 
     height: 700px; 
     .box-shadow(0 10px 2px #999); 
    } 
}

И HTML:

<div class="modal"> 
<div class="modal-content"> 
     My Modal 
    </div> 
</div>

.modal относится к неактивен фону и .modal-контенту относится к коробке, что всплывает.

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

Я могу исправить это с фиксированным положением, но тогда вы не можете увидеть весь контент .model-content.

источник

2013-12-09 panthro

Вы используете Sass право? это не указано. Можете ли вы сделать jsfiddle? –

Что делать, если вы делаете контент прокручиваемым, задавая максимальную высоту и устанавливая свойство переполнения? – TreeTree

Используете ли вы LESS или SASS, если нет, вы не можете вставлять команды CSS, подобные этому –

У меня есть решение для вас, это описано в this post. Это плагин jquery, но вы можете использовать только стили.

Demo и github

В нескольких словах: когда модальный видна мы добавим lock имя класса body элемента (body.lock {overflow: hidden} - предотвращает тело прокрутки).

div.shim - полноэкранный модальный фон (position: fixed), и он имеет overflow: auto, что обеспечивает возможность прокрутки модального контента (а не содержимого тела).

HTML разметка:

<html> 
    <head> 
    ...  
    </head> 
    <body class="lock"> 
    <div class="shim"> 
     <div class="modal"> 
     ... 
     <h1>Hi, I'm the modal demo.</h1> 
     ... 
     </div> 
    </div> 
    ... 
    </body> 
</html>

(я не родной английский оратор, не стесняйтесь, чтобы исправить свой ответ, если необходимо)

источник

2013-12-09 14:58:04

Я не уверен, о чем вы говорите. Спасибо, в любом случае. – panthro

Эта демонстрация позволяет прокручивать Chrome с помощью кнопки колеса. Я вижу прокрутку контента под модальным. – DNT

@panthro посмотреть демо: нажмите на ссылку «Открыть модальный», а в модальном окне нажмите ссылку «добавить больше контента». Я думаю, это то, что вам нужно. –

Замена width:100%; и height:100%; с min-width:100%; и min-height:100%; для .modal класса кажется, исправляет вашу проблему.

.modal { 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    min-width:100%; 
    min-height:100%; 
    background-color: #000; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    z-index: 999; 

    .modal-content { 
     margin: 60px auto; 
     background-image:url('/static/img/background-modal.jpg'); 
     width: 700px; 
     height: 700px; 
     .box-shadow(0 10px 2px #999); 
    } 
}

http://jsfiddle.net/E4Nm4/3/

источник

2013-12-09 15:01:13 block14

Вам нужно добавить позицию: крепится к .modal другой он будет двигаться, как вы прокрутите страницу вниз. Затем я изменил бы .modal-content на:

.modal-content{ 
    position:absolute; 
    margin: -350px 0 0 -350px; 
    top:50%; 
    left:50%; 
    background-image:url('/static/img/background-modal.jpg'); 
    width: 700px; 
    height: 700px; 
    .box-shadow(0 10px 2px #999); 
    z-index:1000; 
}

источник

2013-12-09 15:01:58

Это не решает мою проблему. – panthro

У вас должен быть отдельный «серый цвет». Как так:

<div class="modal"></div> 
    <div class="modal-content"> 
     My Modal 
    </div>

, а затем исправить позиционной неактивен DIV и я сосредоточил модальное содержание DIV по вертикали и по горизонтали

Но проблема была больше с вашим неактивна ДИВЫМ

вот скрипка: http://jsfiddle.net/uj9Gg/2/

источник

2013-12-09 15:08:54 toast

Спасибо, это работает, хотя моя базовая страница теперь прокручивается при прокрутке пользователя, как я могу это исправить? – panthro

Я не могу придумать способ сделать это с помощью css, поэтому я подумал, что если бы вы могли видеть, когда модаль имеет класс видимого переполнения: скрытый на теле, удалите его: http://jsfiddle.net/uj9Gg/3/Я не уверен, что это то, что вы имели в виду, потому что вы упомянули, когда вы прокручиваете, вы можете видеть свой контент, но теперь вы не хотите его прокручивать. Но вы поняли, что я сделал. – toast

Да, переполнение скрыто работает. Хотя теперь мой довольно большой модал не прокручивается. Любая идея, как сделать это прокруткой? – panthro

Что относительно этого?

http://codepen.io/ivanchaer/pen/izDuI

HTML:

<div class="modal"></div> 
<div class="modal-content"> 
    My Modal 
</div>

CSS:

.modal { 
position:fixed; 
display:block; 
top:0; 
left:0; 
width:100%; 
height:100%; 
background-color:#000; 
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity:0.5; 
opacity:0.5; 
z-index:999; 
} 

.modal-content { 
position:relative; 
z-index:1000; 
background-color:#fff; 
width:700px; 
height:700px; 
box-shadow:0 10px 2px #000; 
margin:60px auto; 
}

источник

2013-12-09 16:21:06

Создание модального?

ответ

Смежные вопросы