Hi I want to show Full Screen Overlay Popup on clicking href tag. I tried a lot but couldn't find a particular solution. So far I am able to show/hide popup but i am failed to show full screen popup. So far working fiddle and necessary code is mentioned below.

$(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=".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>

Hi I want to show Full Screen Overlay Popup on clicking href tag. I tried a lot but couldn't find a particular solution. So far I am able to show/hide popup but i am failed to show full screen popup. So far working fiddle and necessary code is mentioned below.

$(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./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/hTQb8/128/

Thanks in advance...

• javascript
• jquery
• html
• css

5 Answers 5

@Ashish working fiddle :

http://jsfiddle/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();
});
});

try this ashish

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

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

its better to move your popup html out of container and inside body.

HTML

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

and some changing in your css code to make it cover window with CSS main properties.

CSS (Key properties to achieve with any kind of html):

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

have a look at fiddle

Easy and best way to implement modal box without using any external file..

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

alue