Question

我正在创建一个纯CSS3模态。

一路上我遇到了两个问题。

单击模态时背景不会变为透明黑色。（如果您在知道我的意思之前已经看过模态，那么基本上它会强制背景为透明类型颜色。）参见截图：

！The original background color is #fff or white Look at the background its color grayish tranparent color when the the modal was active

我一直在考虑如何制作这个3D Flip水平动画或者在来的时候创建一个漂亮而平滑的旋转，而不是从上到下简单地移动。

这是我的HTML：

<p><a href="#modal" class="btn go">Display Modal</a></p>
    </div>

    <div id="modal">
        <div class="modal-content">
                <h1>What is a modal?</h1>
            <div class="copy">
                <p>A modal window is any type of window that is a child (secondary window) to a parent window and usurps the parent's control. It is commonly associated with an Internet Web site pop-up window that stays in front of the original window.  A user may not press any controls or enter any information on the parent window (the original window which opened the modal) until the modal has been closed.</p>
            </div>

                <a href="#" class="btn">Close Modal</a>
            <div class="overlay"></div>
        </div>
    </div>

这是我的样式表代码：

    .container {
    width:50%;
    margin:90px auto
}


#modal {
    background:#97d2f1;
    left:50%;
    top:-50%;
    width:80%;
    padding: 20px;
    margin:-250px 0 0 -40%;
    position:absolute;
    color: #fff;
    visibility: hidden;
    box-shadow:0 3px 7px rgba(0,0,0,.25);
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

#modal:target {
        opacity: 1;
        top:50%;
        visibility: visible;

    }


#modal .overlay {
    background-color: #000;
    background: rgba(0,0,0,.5);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 10;
}



.btn {
    padding:0 3em;
    outline:none;
    border:none;
    color:#fff;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:1px;
    font-size:1em;
    line-height:4;
    overflow:hidden;
    border-radius:5px;
    background:rgba(0,0,0,0.2);
    text-align:center;
    cursor:pointer;
    margin:20px auto;
    display:block;
    width: 30%;
    margin-top: 40px;


}

这是我的JS FIDDLE：http://jsfiddle.net/agx4w5pm/1/

如果您可以编辑我的JSFIDDLE代码，那将是一个很好的帮助。

提前感谢您的帮助！

Answer 1

不明白你的第一点。但是就像你在第二点中提到的那样为你的模态增加了旋转效果。替换以下类

#modal {
    background:#97d2f1;
    left:50%;
    top:-50%;
    width:80%;
    padding: 20px;
    margin:-250px 0 0 -40%;
    position:absolute;
    color: #fff;
    top: 50%;
    box-shadow:0 3px 7px rgba(0,0,0,.25);
    transition: all 1s ;
    -moz-transition: all 1s ;
    -webkit-transition: all 1s ;
    -webkit-transform: rotateX(270deg);
    -webkit-transform-origin: 50% 50%;
    -webkit-perspective: 1500px; 
}

#modal:target {
        opacity: 1;
        top:50%;
        -webkit-transform: rotateX(0deg);
    }

注意提供旋转效果的-webkit-transform: rotateX(270deg);属性。

CSS3模态背景不透明

1 个答案: