CSSを使用してモーダルビューを反応的にする

こんにちは。どのようにすれば、以下のコードをすべての携帯電話やモバイルデバイスの画面に応答するか、自動的に画面に収めることができます。 http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/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>

ありがとう：このコードのsorceは

ソース下のリンクで見つけることができます。

出典

2016-07-05 nackolysis

ここに行ってください！あなたはあなたのモーダルの幅ではなく、最大幅として400ピクセルにしたいだけです。幅は90％に設定されていますので、サイドパディングをモバイルで行うことができます。パディングが考慮されていることを確認するために幅の計算を使用しています。

.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/

出典

2016-07-05 21:03:32 will

CSSを使用してモーダルビューを反応的にする

答えて

関連する問題