Pop-ups can be used to display a message to the user or to notify an event. In this code, we also have a pop-up. This pop-up is simple and is displayed in the middle of the screen. There is a green button at the bottom of the pop-up. Clicking this button will close the pop-up. This green button is full width and its title is white.
HTML
<!-- This script got from www.devanswer.com -->
<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>
CSS
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%;
}Javascript
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();
}
