Logo

Designing a Modern Dialog Modal with HTML, CSS, and JavaScript for Your Website

Codewithhridoy

Codewithhridoy

· 2 min read
Designing a Modern Dialog Modal with HTML, CSS, and JavaScript for Your Website

In this tutorial, we'll create a sleek and professional dialog modal with smooth transitions using HTML, CSS, and JavaScript. We'll also incorporate icons from Font Awesome to enhance the user interface. By the end of this guide, you'll have a reusable modal component that you can easily integrate into your web projects.

Features

  • Smooth fade-in and slide-up animations
  • Responsive design
  • Close on button click or outside click
  • Icons for improved visual appeal

HTML Structure

Let's start with the HTML structure. Create a file named index.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Professional Dialog Modal</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="page-container">
    <button class="btn btn-open-modal" id="openModalBtn">
     Open Modal
    </button>
    <div class="modal-overlay" id="modalOverlay">
      <div class="modal-dialog">
        <button class="modal-close" id="modalCloseBtn" aria-label="Close modal">
          <i class="fas fa-times"></i>
        </button>
        <div class="modal-title">
          <i class="fas fa-info-circle"></i> Dialog Modal
        </div>
        <div class="modal-content">This is a professional modal dialog. You can add your content here.</div>
        <div class="modal-footer">
          <button class="btn btn-close-modal" id="modalFooterCloseBtn">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS Styling

Now, let's create the CSS file. Create a file named styles.css and add the following styles:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

.page-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  border: none;
  padding: 0.8rem 1.5rem;
  background-color: #1da1f2;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #1480bf;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.modal-dialog {
  position: relative;
  background-color: white;
  padding: 2rem;
  width: 90%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.visible .modal-dialog {
  transform: translateY(0);
}

.modal-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.modal-content {
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: #555;
}

.modal-footer {
  text-align: right;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #999;
  transition: color 0.3s ease;
}

.modal-close:hover {
  color: #333;
}

JavaScript Functionality

Finally, let's add the JavaScript to make our modal interactive. Create a file named script.js and add the following code:

const modalOverlay = document.getElementById('modalOverlay');
const openModalBtn = document.getElementById('openModalBtn');
const modalCloseBtn = document.getElementById('modalCloseBtn');
const modalFooterCloseBtn = document.getElementById('modalFooterCloseBtn');

function toggleModal() {
  modalOverlay.classList.toggle('visible');
}

openModalBtn.addEventListener('click', toggleModal);
modalCloseBtn.addEventListener('click', toggleModal);
modalFooterCloseBtn.addEventListener('click', toggleModal);

modalOverlay.addEventListener('click', (e) => {
  if (e.target === modalOverlay) {
    toggleModal();
  }
});

How It Works

  1. The HTML structure defines the layout of our page and modal dialog.
  2. The CSS provides styling and animations for a smooth user experience.
  3. The JavaScript handles the opening and closing of the modal, including clicking outside the modal to close it.

Key CSS Features

  • We use opacity and visibility for smooth fade-in/fade-out effects.
  • The transform property is used to create a slide-up animation when opening the modal.
  • Transitions are applied to create smooth animations for various interactions.

JavaScript Functionality

  • The toggleModal() function adds or removes the visible class to show or hide the modal.
  • Event listeners are added to the open and close buttons, as well as the modal overlay for closing when clicking outside the modal.

Conclusion

With this code, you now have a professional-looking dialog modal with smooth transitions and icons. This modal can be easily customized and integrated into your web projects, providing an enhanced user experience for displaying important information or gathering user input.

Feel free to modify the styles, content, and functionality to suit your specific needs.

Happy coding!

Comments

No approved comments available yet