Things About Web Design Logo

Things About Web Design

PHP CSS MySQL JS Scripts & Tutorials

Responsive Popup Tutorial


.

HTML code below goes just after <body> tag:

3

<!-- Start Popup --> <div class="w3-animate-opacity" id="ac-wrapper" style="display:none"> <div id="popup" style="background-color:black"> <div class="w3-center"> <p><input type="submit" name="submit" value="Close" onClick="PopUp('hide')" style="border-radius:4px; float:right; margin:10px 30px 0 0;" /></p> <h4 style="color:white">Things About Web Design</h4><br /> <h5 style="color:white">Have a great 2021 <input id="read" type="submit" value="Read more" onClick="PopUp('hide')" style="border-radius:4px; margin:1px 30px 1px 1px;"></h5> <a href="https://pngimage.net/tribal-flames-png-3/" title="Image from PNG Image"><img src="https://pngimage.net/wp-content/uploads/2018/06/tribal-flames-png-3.png" alt="tribal flames png 3"></a> </div> </div> </div> <!-- End Popup -->
.

Javascript code below goes just before </body> tag:

2

<script> function PopUp(hideOrshow) { if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none"; else document.getElementById('ac-wrapper').removeAttribute('style'); } window.onload = function () { setTimeout(function () { PopUp('show'); }, 3000); }; </script>
.

The CSS code below goes in <head> or in file: css/style.css

1

<style> #read { cursor:pointer; background-color:transparent; border:none; color:DodgerBlue; } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.6); z-index: 1001; } #popup { width: 255px; height: auto; background: black; border: 5px solid #000; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; box-shadow: #64686e 0px 0px 3px 3px; -moz-box-shadow: #64686e 0px 0px 3px 3px; -webkit-box-shadow: #64686e 0px 0px 3px 3px; position: relative; top: 100px; left:15%; } #flames { width:245px; height:139px; z-index:99; border-radius:25px; margin:0 0 0 0; } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) { #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.6); z-index: 1001; } #popup { width: 355px; height: auto; background: black; border: 5px solid #000; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; box-shadow: #64686e 0px 0px 3px 3px; -moz-box-shadow: #64686e 0px 0px 3px 3px; -webkit-box-shadow: #64686e 0px 0px 3px 3px; position: relative; top: 120px; left:24%; } #flames { width:345px; height:151px; z-index:99; border-radius:25px; margin:0 0 0 0; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) { #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.6); z-index: 1001; } #popup { width: 455px; height: auto; background: black; border: 5px solid #000; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; box-shadow: #64686e 0px 0px 3px 3px; -moz-box-shadow: #64686e 0px 0px 3px 3px; -webkit-box-shadow: #64686e 0px 0px 3px 3px; position: relative; top: 120px; left:24%; } #flames { width:445px; height:141px; z-index:99; border-radius:25px; margin:0 0 0 0; } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) { #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.6); z-index: 1001; } #popup { width: 505px; height: auto; background: black; border: 5px solid #000; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; box-shadow: #64686e 0px 0px 3px 3px; -moz-box-shadow: #64686e 0px 0px 3px 3px; -webkit-box-shadow: #64686e 0px 0px 3px 3px; position: relative; top: 120px; left:26%; } #flames { width:495px; height:177px; z-index:99; border-radius:25px; margin:0 0 0 0; } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) { #ac-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.6); z-index: 1001; } #popup { width: 555px; height:auto; background: black; border: 5px solid #000; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; box-shadow: #64686e 0px 0px 3px 3px; -moz-box-shadow: #64686e 0px 0px 3px 3px; -webkit-box-shadow: #64686e 0px 0px 3px 3px; position: relative; top: 120px; left:27%; } #flames { width:545px; height:247px; z-index:99; border-radius:25px; margin:0 0 0 0; } } </style>