CSS (jquery가 아님)로 팝업 대화 상자가 흐려짐

CSS를 사용하여 매우 간단한 팝업 이미지가 있습니다. 페이드 (fade) 할 방법이 있는지 알고 싶습니다. 전이를 가진 나의 모든 노력 - 과도기; -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에는 페이딩 효과가 있습니다. 사용하려고 시도 했습니까? –

나는 찾지 못했지만, 나는 내가 무엇을 발견하는지보기 위해 구글을 보게 될 것이다. 감사. – 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

내 예제 코드를 사용하여 다행입니다. 도움이 충분하다면 투표하고 내 대답을 표시해주세요. 감사합니다 (y) – sms247

CSS (jquery가 아님)로 팝업 대화 상자가 흐려짐

답변

관련 문제