MODALDIALOG не прокручивая в CSS

я использовал MODALDIALOG который ссылка: modalDialog MODALDIALOG не прокручивая в CSS

по умолчанию, это фиксируется в положении. проблема в том, когда мое содержание вырастает в этом модальном модальном скрытии в нижней части страницы, которая не прокручивается. если я использую положение: абсолютное это прокрутка, но основное тело становится уродливым и меняется на темный и белый фон. есть ли эксперты, предлагающие мне решить проблему. пожалуйста, не предлагайте мне использовать bootstrap modal. Спасибо.

источник

2017-01-22 user7421798

Добавить .modalDialog { overflow-y: auto; }

<!DOCTYPE html> 
 

 
<head> 
 
    <title>Creating a modal window with HTML5 &amp; CSS3</title> 
 

 
    <style> 
 
    .modalDialog { 
 
     overflow-y: auto; 
 
    \t \t position: fixed; 
 
    \t \t font-family: Arial, Helvetica, sans-serif; 
 
    \t \t top: 0; 
 
    \t \t right: 0; 
 
    \t \t bottom: 0; 
 
    \t \t left: 0; 
 
    \t \t background: rgba(0,0,0,0.8); 
 
    \t \t z-index: 99999; 
 
    \t \t opacity:0; 
 
    \t \t -webkit-transition: opacity 400ms ease-in; 
 
    \t \t -moz-transition: opacity 400ms ease-in; 
 
    \t \t transition: opacity 400ms ease-in; 
 
    \t \t pointer-events: none; 
 
    \t } 
 
    
 
    \t .modalDialog:target { 
 
    \t \t opacity:1; 
 
    \t \t pointer-events: auto; 
 
    \t } 
 
    
 
    \t .modalDialog > div { 
 
    \t \t width: 400px; 
 
    \t \t position: relative; 
 
    \t \t margin: 10% auto; 
 
    \t \t padding: 5px 20px 13px 20px; 
 
    \t \t border-radius: 10px; 
 
    \t \t background: #fff; 
 
    \t \t background: -moz-linear-gradient(#fff, #999); 
 
    \t \t background: -webkit-linear-gradient(#fff, #999); 
 
    \t \t background: -o-linear-gradient(#fff, #999); 
 
    \t } 
 
    
 
    \t .close { 
 
    \t \t background: #606061; 
 
    \t \t color: #FFFFFF; 
 
    \t \t line-height: 25px; 
 
    \t \t position: absolute; 
 
    \t \t right: -12px; 
 
    \t \t text-align: center; 
 
    \t \t top: -10px; 
 
    \t \t width: 24px; 
 
    \t \t text-decoration: none; 
 
    \t \t font-weight: bold; 
 
    \t \t -webkit-border-radius: 12px; 
 
    \t \t -moz-border-radius: 12px; 
 
    \t \t border-radius: 12px; 
 
    \t \t -moz-box-shadow: 1px 1px 3px #000; 
 
    \t \t -webkit-box-shadow: 1px 1px 3px #000; 
 
    \t \t box-shadow: 1px 1px 3px #000; 
 
    \t } 
 
    
 
    \t .close:hover { background: #00d9ff; } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <a href="#openModal">Open Modal</a> 
 

 
    <div id="openModal" class="modalDialog"> 
 
    <div> 
 
     <a href="#close" title="Close" class="close">X</a> 
 
     <h2>Modal Box</h2> 
 
     <p>This is a sample modal box that can be created using the powers of CSS3.</p> 
 
     <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

источник

2017-01-22 17:05:44

ой !! замечательно. большое спасибо @Michael – user7421798

, но в чем смысл переполнения-x и переполнения-y ?? У меня путаница, потому что она исправлена. то как это можно прокрутить ??? – user7421798

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x https: // разработчик .mozilla.org/EN-US/Docs/Web/CSS/перелив-й –

MODALDIALOG не прокручивая в CSS

ответ

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