Simple Modal

Elevate user interactions with our versatile modal UI component, seamlessly integrating HTML, CSS, and JavaScript functionalities.

Preview
Code

<button id="openModalBtn" class="modal-btn">Open Modal</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Modal Header</h2>
    <p>This is a responsive modal.</p>
  </div>
</div>

.modal-btn {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.modal-btn:hover {
  background-color: #45a049;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  .modal-content {
    width: 90%;
  }
}

document
  .getElementById('openModalBtn')
  .addEventListener('click', function () {
    document.getElementById('modal').style.display = 'block';
  });

document
  .getElementsByClassName('close')[0]
  .addEventListener('click', function () {
    document.getElementById('modal').style.display = 'none';
  });

window.onclick = function (event) {
  if (event.target == document.getElementById('modal')) {
    document.getElementById('modal').style.display = 'none';
  }
};

Our Modal UI Component offers a sophisticated solution for enhancing user interactions on your website, leveraging the combined power of HTML, CSS, and JavaScript. Designed to facilitate seamless communication and interaction, this component provides a dynamic way to present important information, gather user input, or prompt actions.

With customizable features and intuitive controls, our modal component empowers you to tailor the user experience to your specific needs. Whether you're displaying multimedia content, collecting user feedback, or showcasing product details, our modal component ensures a polished and engaging presentation.

Key Features:

Responsive Design: Our modal component adapts seamlessly to different screen sizes and devices, ensuring consistent user experiences across platforms.
Customizable Styles: Personalize the appearance and behavior of modal windows to align with your website's branding and design aesthetic.
Interactive Elements: Incorporate interactive elements such as buttons, forms, or media within modal windows to facilitate user engagement and interaction.
Accessibility: Committed to inclusivity, our modal component adheres to accessibility standards, ensuring that all users can interact with modal content effectively.

Integrating our Modal UI Component into your HTML, CSS, and JavaScript website is straightforward, requiring minimal setup and configuration. Whether you're creating a portfolio, e-commerce platform, or informational website, our modal component provides a versatile solution for enhancing user experiences and driving engagement.

Steps to Copy the Code

Looking to add a stylish and functional modal to your website for displaying important information or capturing user inputs? Our step-by-step guide will help you create a modal using HTML, CSS, and JavaScript. Follow these easy steps to implement a sleek and user-friendly modal on your website.

Step 1: Copy the Code Snippet

Start by copying the HTML, CSS, and JavaScript code snippet provided above. This snippet serves as the foundation of our modal component. Simply select the code, click the copy button and the code will be copied to your clipboard.

Step 2: Link CSS and JS Files

Ensure that you link the CSS and JavaScript files correctly in your HTML document. Place the CSS code inside the <style> tag in the <head> section of your HTML file, and include the JavaScript code either inline or by linking an external JavaScript file.

Step 3: Personalize Your Modal

Customize the modal component to match your website's branding and design aesthetics. You can modify the colors, sizes, styles, and functionality by adjusting the CSS styles and JavaScript code. Experiment with different modal layouts and effects to create a unique and visually appealing modal experience for your users.

With these simple steps, you can quickly implement a modal using HTML, CSS, and JavaScript, enhancing the functionality and interactivity of your website. Make the modal your own by tailoring it to suit your website's specific needs and design preferences.

Code Explanation

HTML Code

Open Modal Button:

<button id="openModalBtn" class="modal-btn">Open Modal</button>

This <button> element has an ID attribute set to "openModalBtn" and a class attribute set to "modal-btn".
The text inside the button is "Open Modal", indicating its purpose to open the modal dialog when clicked.

Modal Container:

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">×</span>
    <h2>Modal Header</h2>
    <p>This is a responsive modal.</p>
  </div>
</div>

This <div> element represents the modal container and has an ID attribute set to "modal" and a class attribute set to "modal".
Inside the modal container, there's another <div> element with the class "modal-content". This element holds the content of the modal.
Inside the modal content, there's a <span> element with the class "close" and the content "×". This creates a close button with an "×" symbol.
Following the close button, there's an <h2> element with the text "Modal Header", serving as the header of the modal.
Lastly, there's a <p> element with the text "This is a responsive modal.", providing some content for the modal.

CSS Code

Modal Button Styles:

.modal-btn {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

This style rule targets elements with the class "modal-btn", which typically represent buttons that open the modal.
background-color: #4caf50;: Sets the background color to a shade of green (#4caf50).
border: none;: Removes any border around the button.
color: white;: Sets the text color to white.
padding: 15px 32px;: Adds padding of 15 pixels on the top and bottom, and 32 pixels on the left and right, creating spacing inside the button.
text-align: center;: Centers the text horizontally within the button.
text-decoration: none;: Removes any text decoration (e.g., underline).
display: inline-block;: Displays the button as an inline block element.
font-size: 16px;: Sets the font size to 16 pixels.
margin: 4px 2px;: Sets margin of 4 pixels on the top and bottom, and 2 pixels on the left and right, creating spacing around the button.
cursor: pointer;: Changes the cursor to a pointer when hovering over the button.
border-radius: 5px;: Rounds the corners of the button.
transition: background-color 0.3s;: Adds a smooth transition effect of 0.3 seconds to the background-color property.

Hover Styles for Modal Button:

.modal-btn:hover {
  background-color: #45a049;
}

When hovering over a button with the class "modal-btn", the background color changes to a slightly darker shade of green (#45a049).

Modal Styles:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

This style rule targets elements with the class "modal", which represents the entire modal overlay.
display: none;: Initially hides the modal.
position: fixed;: Positions the modal relative to the browser window.
z-index: 1;: Places the modal on top of other content (z-index 1).
left: 0; top: 0; width: 100%; height: 100%;: Stretches the modal to cover the entire viewport.
overflow: auto;: Enables scrolling within the modal content if it exceeds the viewport height.
background-color: rgba(0, 0, 0, 0.5);: Sets the background color to a semi-transparent black overlay using RGBA notation.

Modal Content Styles:

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

This style rule targets elements with the class "modal-content", which represents the content area inside the modal.
background-color: #fefefe;: Sets the background color of the modal content to a light shade of gray (#fefefe).
margin: 10% auto;: Centers the modal content vertically and horizontally on the page, with a margin of 10% from the top.
padding: 20px;: Adds padding of 20 pixels inside the modal content.
border: 1px solid #888;: Adds a 1-pixel solid border with a dark gray color (#888) around the modal content.
width: 80%;: Sets the width of the modal content to 80% of its parent container's width.

Close Button Styles:

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

This style rule targets elements with the class "close", which represent the close button inside the modal.
color: #aaa;: Sets the color of the close button to a light gray (#aaa).
float: right;: Floats the close button to the right side of the modal content.
font-size: 28px;: Sets the font size of the close button to 28 pixels.
font-weight: bold;: Sets the font weight of the close button to bold.

Hover and Focus Styles for Close Button:

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

When hovering over or focusing on the close button, the color changes to black and the cursor changes to a pointer. Additionally, any text decoration (e.g., underline) is removed. This ensures better visual feedback to users interacting with the close button.

Media Query for Responsive Design:

@media screen and (max-width: 600px) {
  .modal-content {
    width: 90%;
  }
}

When the screen width is 600 pixels or less, the width of the modal content is reduced to 90% to ensure better display on smaller screens. This improves the responsiveness of the modal dialog.

JavaScript Code

Opening the Modal:

document.getElementById('openModalBtn').addEventListener('click', function () {
  document.getElementById('modal').style.display = 'block';
});

This code adds an event listener to the button with the ID "openModalBtn", typically used to open the modal.
When the button is clicked, the anonymous function is executed.
Within the function, it sets the display style property of the modal element (identified by the ID "modal") to "block", making it visible.

Closing the Modal (by clicking the close button):

document.getElementsByClassName('close')[0].addEventListener('click', function () {
  document.getElementById('modal').style.display = 'none';
});

This code adds an event listener to the first element with the class "close", typically representing the close button inside the modal.
When the close button is clicked, the anonymous function is executed.
Within the function, it sets the display style property of the modal element to "none", hiding it.

Closing the Modal (by clicking outside the modal):

window.onclick = function (event) {
  if (event.target == document.getElementById('modal')) {
    document.getElementById('modal').style.display = 'none';
  }
};

This code assigns a function to the onclick event of the window object.
When the user clicks anywhere on the window, the function is executed with the event object as its argument.
It checks if the clicked element (event.target) is the modal itself (identified by the ID "modal").
If the clicked element is modal, it sets the display style property of the modal element to "none", hiding it.