CSS "onclick"가상 클래스가 작동하지 않습니다.

이 코드는 약간 변경된 http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/에서 가져 왔습니다.CSS "onclick"가상 클래스가 작동하지 않습니다.

나의 목적은 사용자가 구석에서 [x] 버튼을 클릭하거나 모서리에서 10 초 후에 자동으로 닫을 때 모달 양식을 표시하고 닫는 것입니다.

유일한 문제는 [x] 버튼을 클릭해도 양식을 닫을 수 없다는 것입니다. 아래 코드에서 무엇이 잘못 되었습니까?

index.html을 :

<html> 
<head> 
<link href="style.css" rel="stylesheet"> 
<script src="jquery.min.js"></script> 
</head> 
<body> 
<div id="openModal" class="modalDialog"> 
    <div> 
     <a href="#close" title="Close" class="close">X</a> 
      Hi, this is modal form. 
    </div> 
</div> 

<script type="text/javascript"> 
     setTimeout(function() { 
      $('#openModal').fadeOut('slow'); }, 10000); 
</script> 

</body> 
</html>

있는 style.css :

.modalDialog:target {   
    opacity:0; 
} 

.modalDialog { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 28%; 
    right: 0; 
    bottom: 0; 
    left: 0;  
    z-index: 99999; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
} 

.modalDialog > div { 
    width: 600px; 
    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; }

출처

2013-07-24 user1996297

당신은 닫기 버튼의 클릭에 대한 이벤트 처리기에서 페이드 아웃/close 메소드 중 하나를 호출해야합니다.

출처

2013-07-24 03:54:49 web2008

당신은 추가해야

jQuery(function($){ 
    $('#openModal .close').click(function(){ 
     $('#openModal').fadeOut('slow'); 
    }); 
})

데모 : Fiddle

출처

2013-07-24 03:58:17

이 작업 예제하는 .HTML 파일로 아래의 코드를 저장하고 사용할 수 있습니다.

<html> 
<head> 
<title></title> 
<style type="text/css"> 
.modalDialog { 
-moz-transition: opacity 400ms ease-in 0s; 
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); 
bottom: 0; 
font-family: Arial,Helvetica,sans-serif; 
left: 0; 
opacity: 0; 
pointer-events: none; 
position: fixed; 
right: 0; 
top: 0; 
z-index: 99999; 
} 

.modalDialog:target { 
opacity: 1; 
pointer-events: auto; 
} 

.modalDialog > div { 
background: -moz-linear-gradient(#FFFFFF, #999999) repeat scroll 0 0 transparent; 
border-radius: 10px 10px 10px 10px; 
margin: 10% auto; 
padding: 5px 20px 13px; 
position: relative; 
width: 400px; 
} 

.close { 
background: none repeat scroll 0 0 #606061; 
border-radius: 12px 12px 12px 12px; 
box-shadow: 1px 1px 3px #000000; 
color: #FFFFFF; 
font-weight: bold; 
line-height: 25px; 
position: absolute; 
right: -12px; 
text-align: center; 
text-decoration: none; 
top: -10px; 
width: 24px; 
} 

.close:hover { 
background: none repeat scroll 0 0 #00D9FF; 
} 

</style> 
</head> 
<body> 
<a href="#openModal">Click this Link to open up a Model</a> 
<div id="openModal" class="modalDialog"> 
<div> 
<a class="close" title="Close" href="#close">X</a> 
<h2>Modal Box</h2> 
<p>This is a sample modal ...ing the powers of CSS3.</p> 
<p>You could do a lot of t...egister form for users.</p> 
</div> 
</div> 
</body> 
</html>

출처

2013-07-24 04:16:05 Rex

먼저 add Id to you close button link 자바 스크립트

있음

 <a href="#close" title="Close" class="close" id="closeBtn">X</a>

<script type="text/javascript"> 
     $('#closeBtn').on('click' , function(){ 
     setTimeout(function() { 
     $('#openModal').fadeOut('slow'); }, 10000); 
     }); 
</script>

출처

2013-07-24 04:17:13

CSS "onclick"가상 클래스가 작동하지 않습니다.

답변

관련 문제