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

你應該叫在關閉按鈕的On Click事件處理器要麼淡出/ 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>

現在在Javascript中

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

來源

2013-07-24 04:17:13

CSS「onclick」僞類不工作

回答

相關問題