popup (pro standard)

<head>
<script src="https://web.archive.org/web/20220429062709js_/https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.n01,.fade1').click(function() {
$('#pop1').fadeToggle();
});
});
</script>
<script>
$(document).ready(function(){
$('.n02,.fade2').click(function() {
$('#pop2').fadeToggle();
});
});
</script>
<script>
$(document).ready(function(){
$('.n03,.fade3').click(function() {
$('#pop3').fadeToggle();
});
});
</script>

<style>

#pop1 {
width:100%;
height:100%;
top:0;
left:0;
position:fixed;
z-index:999;
background:rgba(255,255,255,.5); /* background of popup. adjust the .9 for the opacity of the background (1 will be solid white, .5 will be semi transparent, etc.) */
display:none;
}

.fade1 {
top:0;
left:0;
position:fixed;
z-index:1000;
width:100%;
height:100%;
}

.popup1 {
top:37%;
left:50%;
transform:translate(-50%,-50%);
position:fixed;
background:#fff; /* background of popup box */
padding:12px; /* padding of popup box */
z-index:10000;
width:300px; /* width of popup */
border:1px solid #e7defc; /* popup border */
border-radius: 6px;
font-size: 12px;
text-align: left;
line-height: 1.25em;
}

@media (max-width: 1000px) {
.popup1 {
top:41%;
}

</style>

<body>
<div id="pop1">
<div class="fade1"></div>
<div class="popup1">
Popup text goes here! Bold, italics, links, et cetera. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

</body>