jQuery-在href單擊上全屏彈出窗口

Question

嗨，我想在單擊href標簽時顯示全屏覆蓋彈出窗口。 我嘗試了很多，但是找不到特定的解決方案。 到目前為止，我能夠顯示/隱藏彈出窗口，但無法顯示全屏彈出窗口。 到目前為止，下面將介紹工作提琴和必要的代碼。

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

 .pops{ 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"> <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 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> </div> 

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

提前致謝...

Answer 1

@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 2

試試這個ashash

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

Answer 3

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

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;

看看小提琴

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> 

阿魯