jquery模式風格 - 內容覆蓋

Question

昨天我問了這個問題，似乎有點工作，但當點擊顯示它出現的內容然後消失，而不是留在屏幕上。這裏是HTML：

<a href="" class="speclinkOpen">Show Spec</a> 
<div class="speclink"> 
    <h1>This is spec 1</h1> 
    <a class="speclinkClose">Close</a>  
</div> 

<a href="" class="speclinkOpen">Show Spec</a> 
<div class="speclink"> 
    <h1>This is spec 2</h1> 
    <a class="speclinkClose">Close</a>  
</div> 

的CSS：

.speclink { 
    display:none; /* Hide the DIV */ 
    position:fixed; 
    _position:absolute; /* hack for internet explorer 6 */ 
    height:300px; 
    width:600px; 
    background:#FFFFFF; 
    left: 300px; 
    top: 150px; 
    z-index:100; /* Layering (on-top of others), if you have lots of layers: I just maximized, you can change it yourself */ 
    margin-left: 15px; 

    /* additional features, can be omitted */ 
    border:2px solid #ff0000;  
    padding:15px; 
    font-size:15px; 
    -moz-box-shadow: 0 0 5px #ff0000; 
    -webkit-box-shadow: 0 0 5px #ff0000; 
    box-shadow: 0 0 5px #ff0000; 

} 
.speclinkClose { 
    font-size:20px; 
    line-height:15px; 
    right:5px; 
    top:5px; 
    position:absolute; 
    color:#6fa5e2; 
    font-weight:500;  
} 

的jQuery：

$(document).ready(function() { 
$(function(){ 
$('a.speclinkOpen').on('click', function(){ 
$(this).next('div.speclink').css('display','block'); 
}); 
}); 
}); 

爲什麼停留在屏幕上的內容閃起來，而不是？

Answer 1

代碼中的問題很簡單。

<a href=""將其替換爲<a href="#"。

你就完成了。

但它更好地使用一些更好的模式，如jquery dialog 或bootstrap modal。

乾杯！