Scroll Modal, Not Body

Перед тем как направить меня на ранее заданный вопрос: Я НЕ использую Bootstrap, и я не использую jQuery для своих модальных окон.Scroll Modal, Not Body

Я использую this pure HTML/CSS modal. Я хочу иметь возможность прокручивать вертикально длинный модальный (но не мимо него), в идеале, не позволяя остальной части страницы прокручиваться вместе с ней. В настоящее время родительский класс модальности установлен на «position: fixed»; Я предполагаю, что исправление связано с изменением его на «абсолютное», но помимо этого я довольно невежественный.

Единственное, что я могу придумать (jQuery-wise) - это условие, основанное на модальной непрозрачности, так что, когда есть видимый модальный, можно прокрутить вниз до конца модального div (в зависимости от его положения от вершины + высота). Это не идеально, но это всего лишь незначительная неудача, поскольку я знаю, что это будет примерно совпадать с разделом, в котором находятся ссылки (я не дойду до нижнего колонтитула, прокрутив мой модальный, что я имею в виду). Я уверен, что есть более умный способ сделать это. Я не очень хорошо знаком с синтаксисом jQuery, поэтому я был бы очень признателен, если бы предложения были связаны с битами кода.

Альтернативно, не стесняйтесь указывать мне альтернативные варианты для модальных окон. Я не против jQuery-based, если они легкие и простые. Я действительно хочу избежать Bootstrap как можно больше.

EDIT: Образец кода, иллюстрирующий проблему.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 

<style> 
body { 
    height: 4000px; 
} 

.modalDialog { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8); 
    z-index: 1040; 
    opacity:0; 
    transition:   opacity 0.3s ease-in; 
    -webkit-transition: opacity 0.3s ease-in; 
    -moz-transition: opacity 0.3s ease-in; 
    -o-transition:  opacity 0.3s ease-in; 
    pointer-events: none; 
} 

.modalDialog > div { 
    color: #ffffff; 
    height: 2000px; 
    position: relative; 
    top: 0; 
    margin: 2.5%; 
    padding: 10px; 
    background: #000000; 
    z-index: 1050; 
} 

.modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
} 

</style> 

</head> 

<body> 
    <a href="#modal">Open the modal window</a> 

    <div id="modal" class="modalDialog"> 
     <div>This is the modal window</div> 
    </div> 

</body> 
</html>

источник

2015-08-16 Nils

Вы пытаетесь добавить 'переполнении-у: scroll' в CSS ?. – wallek876

@TJCrowder прав, мы можем только догадываться, может быть, вы можете использовать позицию: исправлено с модальным –

@TJCrowder: Я имел в виду, что я в настоящее время не использую jQuery для модальных окон, но я ожидаю решения требуйте его. Извините за мой плохой синтаксис, английский не мой первый язык. Я обновил первый пост с помощью кода. – Nils

Понял об этом! Спасибо wallek876 за то, что он подтолкнул меня в правильном направлении с переполнением.

Модифицированный родительский класс окна требует «положения: фиксированный» и «переполнение-y: авто».
«Открытые» и «близкие» ссылки требуют соответствующих классов, которые можно назвать.
Используя jQuery, можно переключить переполнение тела на основании того, какая ссылка нажата (отключить прокрутку, когда модальная функция открыта, включить прокрутку, когда модаль закрыт).

Конкретное JQuery:

$(document).ready(function() { 
    $('.openModal').click(function() { 
    $('body').css('overflow', 'hidden'); 
    }); 
$('.close').click(function() { 
    $('body').css('overflow', 'auto'); 
    }); 
});

Вот отредактированный пример, для контекста:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<style> 

    body { 
     height: 4000px; 
    } 

    a:link, a:visited, a:hover, a:active { 
     color: #ff0000; 
    } 

    .modalDialog { 
     position: fixed; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: rgba(0,0,0,0.8); 
     z-index: 1040; 
     opacity:0; 
     overflow-y: auto; 
     transition:   opacity 0.3s ease-in; 
     -webkit-transition: opacity 0.3s ease-in; 
     -moz-transition: opacity 0.3s ease-in; 
     -o-transition:  opacity 0.3s ease-in; 
     pointer-events: none; 
    } 

    .modalDialog > div { 
     color: #ffffff; 
     height: 2000px; 
     position: relative; 
     top: 0; 
     margin: 2.5%; 
     padding: 10px; 
     background: #000000; 
     z-index: 1050; 
     border: 2px #ff0000 solid; 
    } 

    .modalDialog:target { 
     opacity:1; 
     pointer-events: auto; 
    } 

</style> 

</head> 

<body> 

<script> 
    $(document).ready(function() { 
     $('.openModal').click(function() { 
     $('body').css('overflow', 'hidden'); 
     }); 
    $('.close').click(function() { 
     $('body').css('overflow', 'auto'); 
     }); 
    }); 
</script> 

    <a href="#modal" class="openModal">Open the modal window</a> 

    <div id="modal" class="modalDialog"> 
     <div><a href="#close" class="close">Close the modal window</a></div> 
    </div> 

</body> 
</html>

источник

2015-08-16 21:17:47 Nils

Scroll Modal, Not Body

ответ

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