Jquery-全屏彈出式覆蓋href點擊

Question

嗨我想單擊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/

在此先感謝...

Answer 1

試試這個阿希什

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

Answer 2

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

Answer 3

@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(); 
}); 
}); 

Answer 4

它更好地將您的彈出html移出容器和體內。

HTML

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

，並在你的CSS代碼中的一些變化，使其覆蓋主CSS屬性窗口。

CSS（關鍵性能達到與任何類型的HTML）：

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

看看fiddle

Answer 5

容易和實施模式對話框，而無需使用任何外部文件的最好的方法..

$(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>

藍色