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。

干杯!!

jquery模态样式 - 内容叠加

1 个答案: