Title: A Beginner's Guide to Integrating Popups into Your Web Page

Introduction:
Popups are a versatile tool in web development, allowing you to deliver important messages, capture user attention, or prompt actions. Integrating popups into your web page effectively can enhance user experience and engagement. In this article, we'll explore the basics of creating and integrating popups into your website using HTML, CSS, and JavaScript.

Understanding the Basics:
Before we dive into implementation, let's understand the basic components of a popup. A popup typically consists of two main parts: the trigger element (e.g., a button or a link) that initiates the display of the popup, and the popup container itself, which holds the content to be displayed.

Step 1: HTML Structure:
To create a popup, we need to define its structure in HTML. Here's a basic example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Main content -->
    <div class="content">
        <!-- Button to trigger the popup -->
        <button id="open-popup">Open Popup</button>
    </div>

    <!-- Popup container -->
    <div class="popup" id="popup">
        <!-- Popup content -->
        <div class="popup-content">
            <span class="close" id="close-popup">&times;</span>
            <h2>This is a Popup</h2>
            <p>Hello, this is some sample text inside the popup.</p>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="script.js"></script>
</body>
</html>

Step 2: Styling with CSS:
Next, let's style our popup using CSS to make it visually appealing and responsive. Here's an example of CSS styles:

/* Popup container */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 5px;
    z-index: 999;
}

/* Popup content */
.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
}

/* Close button */
.close {
    float: right;
    cursor: pointer;
}

Step 3: Adding Functionality with JavaScript:
Finally, let's add functionality to our popup using JavaScript. This includes opening and closing the popup when triggered. Here's the JavaScript code:

// Get the popup and close button elements
var popup = document.getElementById('popup');
var closeButton = document.getElementById('close-popup');
var openButton = document.getElementById('open-popup');

// Function to open the popup
function openPopup() {
    popup.style.display = 'block';
}

// Function to close the popup
function closePopup() {
    popup.style.display = 'none';
}

// Event listener for the open button
openButton.addEventListener('click', openPopup);

// Event listener for the close button
closeButton.addEventListener('click', closePopup);

// Close the popup if user clicks outside of it
window.addEventListener('click', function(event) {
    if (event.target == popup) {
        closePopup();
    }
});

Conclusion:
Integrating popups into your web page can greatly enhance user interaction and engagement. By following these simple steps and customizing them to fit your specific needs, you can create effective and visually appealing popups for your website. Experiment with different designs and functionalities to find what works best for your audience. Happy coding!

Integrate Pop up in JavaScript without any Library