javascript - Jquery- href 单击时全屏弹出覆盖

Question

您好，我想在单击 href 标签时显示全屏叠加弹出窗口。我尝试了很多但找不到特定的解决方案。到目前为止，我能够显示/隐藏弹出窗口，但无法显示全屏弹出窗口。到目前为止，下面提到了工作 fiddle 和必要的代码。

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

fiddle : http://jsfiddle.net/hTQb8/128/

提前致谢...

Answer 1

@Ashish 工作 fiddle :

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