How to generate a simple popup using jQuery ?

27 Jan, 2021
The task is to generate a popup using jQuery. Popups are useful to splash important information to the visitors of a website.
Approach: A simple pop can be made by using toggle() method of jQuery which toggles between hide() and show() function of jQuery i.e. it checks the visibility of the selector used. The hide() method is run when the selector is visible and show() is run when the selector is not visible.
It displays the popup if the show popup button is clicked and hides the popup if the closed button is clicked.
The selector used for toggling is ” .content ” which contains the close button and popup’s body. Initially to hide the popup on page reload we have used the display: none property on the .content class in style tag. 
Now when the user clicks on the show popup button the onclick event calls the togglePopup() which displays the popup and when the user clicks on the close button onclick event again calls the togglePopup() which hides the popup.
$(selector).toggle();
HTML
<!DOCTYPE html><html>  <head>    <!-- jQuery cdn link -->    <script src=        "https://code.jquery.com/jquery-3.5.1.min.js">    </script>          <style type="text/css">        .content {            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            width: 500px;            height: 200px;            text-align: center;            background-color: #e8eae6;            box-sizing: border-box;            padding: 10px;            z-index: 100;            display: none;            /*to hide popup initially*/        }                  .close-btn {            position: absolute;            right: 20px;            top: 15px;            background-color: black;            color: white;            border-radius: 50%;            padding: 4px;        }    </style></head>  <body>    <button onclick="togglePopup()">show popup</button>      <!-- div containing the popup -->    <div class="content">        <div onclick="togglePopup()" class="close-btn">            ×        </div>        <h3>Popup</h3>          <p>            jQuery is an open source JavaScript library             that simplifies the interactions between an            HTML/CSS document, or more precisely the             Document Object Model (DOM), and JavaScript.            Elaborating the terms, jQuery simplifies             HTML document traversing and manipulation,             browser event handling, DOM animations,             Ajax interactions, and cross-browser             JavaScript development.        </p>    </div>      <script type="text/javascript">              // Function to show and hide the popup        function togglePopup() {            $(".content").toggle();        }    </script></body>  </html>
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type