ModalDialog rollt nicht in CSS

i eine ModalDialog verwendet, der Referenz: modalDialog ModalDialog rollt nicht in CSS

Standardmäßig ist diese in seiner Position fixiert ist. Das Problem ist, wenn mein Inhalt in diesem Modal wächst, verbirgt sich das Modal im unteren Teil der Seite, die nicht scrollt. Wenn ich Position: absolute es scrollen, aber Hauptteil wird hässlich und ändert sich in dunklen und weißen Hintergrund. Gibt es Experten, die mir vorschlagen, das Problem zu lösen? Bitte schlage mir nicht vor, Bootstrap Modal zu verwenden. Danke.

Quelle

2017-01-22 user7421798

hinzufügen .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>

Quelle

2017-01-22 17:05:44

oh !! das ist großartig. Vielen Dank @Michael – user7421798

aber was ist die Bedeutung von Überlauf-x und Überlauf-y ?? Ich habe Verwirrung, weil es behoben ist. wie könnte es dann sein, zu scrollen? – user7421798

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x https: // developer .mozilla.org/de-DE/docs/Web/CSS/Überlauf-y –

ModalDialog rollt nicht in CSS

Antwort

Verwandte Themen