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。

干杯！