Making Modal View reagiert mit CSS

Hallo Große Programmierer von Stackoverflow. Wie kann ich den unten stehenden Code als reaktionsschnell oder automatisch in den Bildschirm aller Mobiltelefone oder mobilen Geräte passen. http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/Making Modal View reagiert mit CSS

<html> 
<meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<head> 
    <title></title> 



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

Dank: Die sorce dieses Codes können in den unten stehenden Link

Quelle gefunden werden.

Quelle

2016-07-05 nackolysis

Hier gehts! Sie wollen nur 400px als Ihre maximale Breite anstelle Ihrer Breite auf Ihrem modalen. Die Breite ist auf 90% eingestellt, so dass Sie etwas Seitenpolster auf dem Handy bekommen - Sie werden sehen, dass ich eine Berechnung für die Breite verwendet habe, um sicherzustellen, dass das Padding ebenfalls berücksichtigt wird.

.modalDialog > div { 
    max-width: 400px; 
    width: calc(90% - 40px); 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
}

http://jsfiddle.net/will0220/h28atsLo/1/

Quelle

2016-07-05 21:03:32 will

Making Modal View reagiert mit CSS

Antwort

Verwandte Themen