Question

Hello Great coders of Stackoverflow. How can i make the code below to be responsive or to automatically fit into the screen of all mobile phones or mobile devices. The sorce of this code can be found in the link below

source: http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/

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

Thanks.

Answer 1

你走了！您只想将400px作为最大宽度而不是模态上的宽度。宽度设置为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/

Making Modal View responsive using css

1 个答案: