jQuery Modal on Show + Target Button - Javascript

In modern web development, using modal windows has become a popular way to display content without navigating away from the current page. jQuery Modal on Show + Target Button is a powerful combination of jQuery and Javascript that allows for easy creation and customization of modal windows triggered by a target button.

How It Works

When a target button is clicked, a modal window is displayed on the screen. The modal window is created using jQuery and HTML and can be fully customized with CSS. The Javascript code provides the logic for displaying and hiding the modal window.

Getting Started

To get started with this technique, you will need the following:

• jQuery library
• Target button
• Modal window HTML and CSS

Code Example

Here is an example of how to implement jQuery Modal on Show + Target Button:

HTML

<button class="btn-target">Click Here</button>

<div class="modal-container">
  <div class="modal-content">
    <h2>Modal Window</h2>
    <p>This is a modal window.</p>
    <button class="btn-close">Close</button>
  </div>
</div>

CSS

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

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  max-width: 400px;
  text-align: center;
}

.btn-close {
  margin-top: 10px;
}

Javascript

$(document).ready(function() {
  // Show modal when target button is clicked
  $('.btn-target').click(function() {
    $('.modal-container').fadeIn();
  });

  // Close modal when close button is clicked
  $('.btn-close').click(function() {
    $('.modal-container').fadeOut();
  });
});

Conclusion

jQuery Modal on Show + Target Button is a simple but powerful technique for displaying modal windows on a web page. With this technique, you can add rich and dynamic content to your web pages without navigating away from the current page.