Menu Close

How To Create Popups Using Jquery

Popups Jquery

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>
    <title>How To Create Popups Using Jquery</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <link rel="stylesheet" href="style.css">
<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>
    function togglePopup() {

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;
    background-color: #eeff;
    color: #333;
    padding-top: 20px;
Posted in CSS, HTML, jQuery

You can also read...