Here, we will see how to create popups using jquery. The toggle() method is used to create a simple popup, it toggles between the hide() and show() function of jquery. Follow the below snippet to create a popup with responsive design.
<!DOCTYPE html>
<html>
<head>
<title>How To Create Popups Using Jquery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button onclick="togglePopup()">Show Popup</button>
<div class="content-show">
<div onclick="togglePopup()" class="close-btn">x</div>
<h4>Popup Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<script>
function togglePopup() {
$(".content-show").toggle();
}
</script>
</body>
</html>
Add the below stylesheet to the html file for better responsiveness.
body {
margin: 50px;
font-family: Arial, sans-serif;
}
.content-show {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
text-align: center;
background-color: #eeff;
box-sizing: border-box;
padding: 10px;
z-index: 100;
display: none;
}
.close-btn {
position: absolute;
right: 20px;
top: 15px;
background-color: #000;
color: #fff;
border-radius: 50%;
padding: 4px 10px;
}
button{
background-color: #eeff;
}
p{
color: #333;
padding-top: 20px;
}