Question

我想混合这些代码：

http://www.script-tutorials.com/css3-modal-popups/comment-page-1/#comment-66063

http://dl.dropbox.com/u/2111778/CSS3-Fancy-Box/CSS-BoxModel2.html#show2

所以我的想法是打开一个模态弹出窗口，并有一个滑块“花式框”。我想只使用html / css3而不使用jquery / javascript。

我尝试了这段代码，但它不起作用：

<!DOCTYPE html> 
<html>
<head>
<style>
.overlay {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
cursor: default;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
visibility: hidden;
z-index: 1;

-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
background-color: #fff;
display: inline-block;
left: 52%;
opacity: 0;
padding: 15px;
position: fixed;
text-align: justify;
visibility: hidden;
z-index: 10;

-webkit-transform: translate(-55%, 0%);
-moz-transform: translate(-55%, 0%);
-ms-transform: translate(-55%, 0%);
-o-transform: translate(-55%, 0%);
transform: translate(-55%, 0%);

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;

-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
top: 5%;
opacity: 1;
visibility: visible;
}

.popup p, .popup div {
margin-bottom: 10px;
}

.button-group{
margin-left: 42%;
}

.button{
float: left;
width: 6px;
height: 6px;
background-color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: 2px solid rgba(0,0,0,0.2);
margin: 4px;
}

.button:hover{
border: 2px solid gray;
background-color: gray;
}

.button:active{
border: 2px solid gray;
background-color: #000;
}

.fancybox{
padding: 10px;
display: none;
visibility: hidden;
}

.show:target {
display: block;
visibility: visible;
}

.position {
margin-left: 25%;
}
</style>

</head>
<body>
    <a href="#test1" id="login_pop">test1</a>
    <a href="#x" class="overlay" id="test1"></a>
    <div class="popup">
        <h3>TEST</h3>
        <div id="show1" class="show fancybox position">
            <img src="picture01.jpg" width="300px" height="200px"/>
        </div>
        <div id="show2" class="show fancybox position">
            <img src="picture02.jpg" width="300px" height="200px"/>
        </div>
        <div id="show3" class="show fancybox position">
            <img src="picture02.jpg" width="300px" height="200px"/>
        </div>
        <div id="show4" class="show fancybox position">
            <img src="picture02.jpg" width="300px" height="200px"/>
        </div>
        <div id="show5" class="show fancybox position">
            <img src="picture01.jpg" width="300px" height="200px" />
        </div>

        <div class="button-group show">
            <a href="#show1" class="button"></a>
            <a href="#show2" class="button"></a>
            <a href="#show3" class="button"></a>
            <a href="#show4" class="button"></a>
            <a href="#show5" class="button"></a>
        </div>
        <br/><br/>
        <p>test</p>
    </div>
<body>

谢谢

CSS3模态弹出窗口和花式框滑块

0 个答案: