cbabos/gist:f7c8696aaf7ec9d2a6a3

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- js, css includes -->
    <style>

        html, body {
            height: 100%;
            width: 100%;
            margin: 0; padding: 0;
        }

        .body_overlay {
           overflow: hidden;
           margin: 0; padding: 0;
           height: 100%;
        }

        #advert_overlay {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            background: #000;
            opacity: 0.8;
            z-index: 10;
        }

        #advert_popup {
            width: 50%;
            height: 5em;
            margin: 5em auto;
            padding: 2em;
            background: #afafaf;
            border-radius: 7px;
            box-shadow: 0 0 10px #6f6f6f;
            color: #6f6f6f;
            position: absolute;
            top: 0;
            left: -50%;
            right: -50%;
            z-index: 11;
        }
        .hidden {
            display: none !important;
        }
    </style>

</head>
<body>
    <article id="content">
        <header>
            <h1>Some article's header</h1>
        </header>
        <p>Some text in the article just forgot it...</p>
    </article>
    <div id="advert_overlay" class="hidden"></div>
    <div id="advert_popup" class="hidden">
        <header>
            <h6>Advert (<a href="#" data-close>Close</a>)</h6>
        </header>
        <p>Advert content</p>
    </div>

    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- popup advert -->
    <script type="text/javascript">


        function showPopup() {
            $('#advert_popup a[data-close]').click(function(ev) {
                ev.preventDefault();
                $('#advert_overlay, #advert_popup').addClass('hidden');
                $('body').removeClass('body_overlay');
                return false;
            });

            $('body').addClass('body_overlay');
            $('#advert_overlay, #advert_popup').removeClass('hidden');

            return true;
        }

        $(document).ready(function() {
            showPopup();
        });
    </script>
    <!-- /popup advert -->
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<!-- js, css includes -->
	<style>

	html, body {
	height: 100%;
	width: 100%;
	margin: 0; padding: 0;
	}

	.body_overlay {
	overflow: hidden;
	margin: 0; padding: 0;
	height: 100%;
	}

	#advert_overlay {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
	opacity: 0.8;
	z-index: 10;
	}

	#advert_popup {
	width: 50%;
	height: 5em;
	margin: 5em auto;
	padding: 2em;
	background: #afafaf;
	border-radius: 7px;
	box-shadow: 0 0 10px #6f6f6f;
	color: #6f6f6f;
	position: absolute;
	top: 0;
	left: -50%;
	right: -50%;
	z-index: 11;
	}
	.hidden {
	display: none !important;
	}
	</style>

	</head>
	<body>
	<article id="content">
	<header>
	<h1>Some article's header</h1>
	</header>
	<p>Some text in the article just forgot it...</p>
	</article>
	<div id="advert_overlay" class="hidden"></div>
	<div id="advert_popup" class="hidden">
	<header>
	<h6>Advert (<a href="#" data-close>Close</a>)</h6>
	</header>
	<p>Advert content</p>
	</div>

	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<!-- popup advert -->
	<script type="text/javascript">



	function showPopup() {
	$('#advert_popup a[data-close]').click(function(ev) {
	ev.preventDefault();
	$('#advert_overlay, #advert_popup').addClass('hidden');
	$('body').removeClass('body_overlay');
	return false;
	});

	$('body').addClass('body_overlay');
	$('#advert_overlay, #advert_popup').removeClass('hidden');

	return true;
	}

	$(document).ready(function() {
	showPopup();
	});
	</script>
	<!-- /popup advert -->
	</body>
	</html>