CSS（jqueryではない）を使ったポップアップダイアログのフェーディング

CSSを使用した非常に単純なポップアップイメージがあります。私はそれを消す方法があるかどうかを知りたいと思います。すべての私の努力 - 過渡期 - 過渡期; -ms-transition、-moz-transition; -webkit-transition;遷移、; bla、bla、bla ...何もしなかった。CSS（jqueryではない）を使ったポップアップダイアログのフェーディング

おかげ

#button { 
 
    position: relative; 
 
    margin: 1px 0 0 0; 
 
    padding-top: 10px; 
 
    cursor: pointer; 
 
    display:inline-block; 
 
    position:absolute; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
    background-repeat:no-repeat; 
 
    background-size:cover; 
 
} 
 

 
.popup { 
 
    position: absolute; 
 
    padding-top:30px; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: none; 
 
    text-align:center; 
 
    background-color:rgba(0, 0, 0, 0.8); 
 
    z-index: 101; 
 
} 
 

 
.popup:target { 
 
    display: block; 
 
} 
 

 
.popup img { 
 
    padding: 10px; 
 
    z-index: 120; 
 
    border: solid 1px gray; 
 
    cursor: pointer; 
 
    background-color:#FFFFFF; 
 
    -moz-border-radius: 2px; 
 
    -webkit-border-radius: 2px; 
 
    border-radius: 2px; 
 
}

<div> 
 
    <!-- button --> 
 
    <div id="button"> 
 
    <a href="#bigger" title="LALA"><img src="http://imagenes.es.sftcdn.net/es/scrn/115000/115177/thumbnail_1459842713-100x100.png" title="Landscape button" alt="landscape"></a> 
 
    </div> 
 

 
    <!--pop up--> 
 
    <div id="bigger" class="popup"> 
 
    <a href="#"><img src="http://www.robertofarrenphotography.com/wp-content/uploads/galleries/post-1336/thumbnails/BOSTON%20LANDSCAPE%20PHOTOGRAPHER_USA_049.jpg" alt="landscape"/></a> 
 
    </div> 
 
</div>

出典

2016-09-05 Danielillo

jQueryにはフェーディング効果がありますが、それらを使って試しましたか？ –

私はしなかった、私は私が見つけるものを見るためにGoogleで見ていきます。ありがとう。 – Danielillo

はあなたの問題ため、このコード例に従う

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
/* Add animation (Chrome, Safari, Opera) */ 
 
@-webkit-keyframes example { 
 
from {top:-100px;opacity: 0;} 
 
to {top:0px;opacity:1;} 
 
} 
 

 
/* Add animation (Standard syntax) */ 
 
@keyframes example { 
 
from {top:-100px;opacity: 0;} 
 
to {top:0px;opacity:1;} 
 
} 
 

 
/* The modal's background */ 
 
.modal { 
 
    display: none; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
    background-color: rgb(0, 0, 0); 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
} 
 

 
/* Display the modal when targeted */ 
 
.modal:target { 
 
    display: table; 
 
    position: absolute; 
 
} 
 

 
/* The modal box */ 
 
.modal-dialog { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
/* The modal's content */ 
 
.modal-dialog .modal-content { 
 
    margin: auto; 
 
    background-color: #f3f3f3; 
 
    position: relative; 
 
    padding: 0; 
 
    outline: 0; 
 
    border: 1px #777 solid; 
 
    text-align: justify; 
 
    width: 80%; 
 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
 

 
    /* Add animation */ 
 
    -webkit-animation-name: example; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration: 0.5s; /* Chrome, Safari, Opera */ 
 
    animation-name: example; 
 
    animation-duration: 0.5s; 
 
} 
 

 
/* The button used to close the modal */ 
 
.closebtn { 
 
    text-decoration: none; 
 
    float: right; 
 
    font-size: 35px; 
 
    font-weight: bold; 
 
    color: #fff; 
 
} 
 

 
.closebtn:hover, 
 
.closebtn:focus { 
 
    color: #000; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
.container { 
 
    padding: 2px 16px; 
 
} 
 

 
header { 
 
    background-color: #5cb85c; 
 
    font-size: 25px; 
 
    color: white; 
 
} 
 

 
footer { 
 
    background-color: #5cb85c; 
 
    font-size: 20px; 
 
    color: white; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<a href="#id01"><img src="http://imagenes.es.sftcdn.net/es/scrn/115000/115177/thumbnail_1459842713-100x100.png" title="Landscape button" alt="landscape"></a> 
 

 
<div id="id01" class="modal"> 
 
    <div class="modal-dialog"> 
 
<div class="modal-content"> 
 
    <header class="container"> 
 
    <a href="#" class="closebtn">×</a> 
 
    <h2>Modal Header</h2> 
 
    </header> 
 
    <div class="container"> 
 
    <a href="#"><img src="http://www.robertofarrenphotography.com/wp-content/uploads/galleries/post-1336/thumbnails/BOSTON%20LANDSCAPE%20PHOTOGRAPHER_USA_049.jpg" alt="landscape" width="100%" height="100%"/></a> 
 
    </div> 
 
    <footer class="container"> 
 
    <p>Modal footer</p> 
 
    </footer> 
 
</div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

（あなたがそれをたくない場合は、モーダルダイアログのヘッダーとフッターを削除することができます）

出典

2016-09-05 06:24:02 sms247

私はフェードインではできますが、フェードアウトではありません。とにかく、私は結果に満足しています。 codepen： http://codepen.io/danielillo/pen/JRoRzQ?editors=1100 – Danielillo

私のサンプルコードでうれしく思います。 – sms247

CSS（jqueryではない）を使ったポップアップダイアログのフェーディング

答えて

関連する問題