0

我昨天问了这个问题，似乎它有点工作，但是当我点击显示内容时，它出现然后消失，而不是留在屏幕上。这是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');
});
});
});

为什么内容会闪现而不是停留在屏幕上？

4

1 回答 1

0

您的代码中的问题很简单。

<a href=""将此替换为<a href="#".

你就完成了。

但最好使用一些更好的模式，如jquery 对话框 或bootstrap modal。

干杯！！

于 2013-09-27T08:33:41.923 回答