Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 15px;
background-color: #ccc;
}
.popup {
background-color: #fff;
width: 0px;
height: 0px;
overflow: hidden;
transition: width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), height 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), top 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: 30%;
box-shadow: 0px 1px 2px #1a2308;
border-radius: 7px;
display: flex;
flex-direction: column;
}
.popup .content {
padding: 10px;
color: #555;
text-align: center;
margin-top: auto;
}
.popup .buttons {
margin-top: auto;
}
.popup .buttons button {
background-color: #96CA2D;
border: 1px solid #a2d43d;
width: 100%;
padding-top: 7px;
padding-bottom: 7px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
}
.popup.show {
width: 200px;
height: 130px;
top: 10%;
}
</style>
</head>
<body>
<div class="popup">
<div class="content">
This is some important information showing in a popup sign.
</div>
<div class="buttons">
<button onclick="hide()">Okay</button>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button onclick="toggle()">Show!</button><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
function toggle () {
console.log('test');
console.log(document.getElementsByClassName('popup'))
let element = document.getElementsByClassName('popup')[0]
let classes = element.className;
if (classes.indexOf('show') !== -1) {
element.className = element.className.replace('show', '').replace(' ', '')
} else {
element.className += ' show'
}
}
function hide() {
toggle();
}
</script>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpbh-mt'},{'server':'p3plmcpnl484880'},{'dcenter':'p3'},{'cp_id':'765442'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>
