Jquery-全屏弹出式覆盖href点击

问题描述：

嗨我想单击href标记显示全屏覆盖弹出窗口。我尝试了很多，但找不到特定的解决方案。到目前为止，我能够显示/隐藏弹出窗口，但我未能显示全屏弹出窗口。到目前为止，工作小提琴和必要的代码如下所述。Jquery-全屏弹出式覆盖href点击

$(document).ready(function(){ 
 
    $('.opop').click(function(){ 
 
     $('.pops').fadeIn(); 
 
    }); 
 
    $('.cls-pop').click(function(){ 
 
     $('.pops').fadeOut(); 
 
    }); 
 
});

.pops{ 
 
\t display:none; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="items"> 
 
    \t <ul> 
 
     \t <li>Abc</li> 
 
     \t <li>Abc</li> 
 
     \t <li>Abc</li> 
 
     \t <li>Abc</li> 
 
     \t <li>Abc</li> 
 
     \t <li>Abc</li> 
 
     </ul> 
 
     <a href="#" class="opop">Open Popup</a> 
 
     
 
     <div class="pops"> 
 
     \t Some Content 
 
      
 
       <ul> 
 
        <li>Bcd</li> 
 
        <li>Bcd</li> 
 
        <li>Bcd</li> 
 
        <li>Bcd</li> 
 
        <li>Bcd</li> 
 
       </ul> 
 
       
 
       <p> Some More Content </p> 
 
       <a href="#" class="cls-pop">Close Popup</a> 
 
     </div> 
 
     
 
    </div>

小提琴：http://jsfiddle.net/hTQb8/128/

在此先感谢...

答

试试这个阿希什

.pops{ 
display:none; 
height: 100%; 
width: 100%; 
background: #fff; 
position:absolute; 
z-index:1; 
top:0; 
}

其工作原理...谢谢... – Ashish

答

.pops{ 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:1000; 
    background: #fff; 
}

答

@Ashish工作小提琴：

http://jsfiddle.net/hTQb8/134/

HTML

<div class="items"> 
    <ul> 
     <li>Abc</li> 
     <li>Abc</li> 
     <li>Abc</li> 
     <li>Abc</li> 
     <li>Abc</li> 
     <li>Abc</li> 
    </ul> 
    <a href="#" class="opop">Open Popup</a> 
</div> 
<div class="pops"> 
     Some Content 

      <ul> 
       <li>Bcd</li> 
       <li>Bcd</li> 
       <li>Bcd</li> 
       <li>Bcd</li> 
       <li>Bcd</li> 
      </ul> 

      <p> Some More Content </p> 
      <a href="#" class="cls-pop">Close Popup</a> 
    </div>

CSS

.pops{ 
    display:none; 
    height: 100%; 
    width: 100%; 
    background-color: gray; 
    position : absolute; 
    z-index:1; 
top:0; 
}

的jQuery

$(document).ready(function(){ 
$('.opop').click(function(){ 
    $('.pops').fadeIn(); 
}); 
$('.cls-pop').click(function(){ 
    $('.pops').fadeOut(); 
}); 
});

答

它更好地将您的弹出html移出容器和体内。

HTML

<div class="items">...</div> 
<div class="pops">....</div>

，并在你的CSS代码中的一些变化，使其覆盖主CSS属性窗口。

CSS（关键性能达到与任何类型的HTML）：

position:absolute; 
top:0; 
bottom:0; 
z-index:999;

看看fiddle

答

容易和实施模式对话框，而无需使用任何外部文件的最好的方法..

$(document).ready(function(){ 
 
$('#link').on('click', function() { 
 
    $('#modal-overlay, #overlay-wrapper').fadeIn(500); 
 
}); 
 
    $('#close').on('click', function() { 
 
    $('#modal-overlay, #overlay-wrapper').fadeOut(500); 
 
}); 
 
})

html, body { 
 
    width : 100%; 
 
    height : 100%; 
 
} 
 
#modal-overlay { 
 
    position : absolute; 
 
    top  : 0; 
 
    left  : 0; 
 
    width  : 100%; 
 
    height  : 100%; 
 
    background : #000; 
 
    opacity : 0.6; 
 
    filter  : alpha(opacity=60); 
 
    z-index : 5; 
 
    display : none; 
 
} 
 

 
#overlay-wrapper { 
 
    position : absolute; 
 
    top  : 0; 
 
    left  : 0; 
 
    width : 100%; 
 
    height : 100%; 
 
    z-index : 10; 
 
    display : none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="link" href="#">click me</a> 
 
<div id="modal-overlay"></div> 
 
<div id="overlay-wrapper"> 
 
    <a id="close" href="#">Close</a> 
 
    <span>modal box value</span></div>

蓝色

Jquery-全屏弹出式覆盖href点击

相关推荐