the pop-up modal function is malfunctioning

Question

the pop-up modal function is malfunctioning

I can't get my pop up to work properly. When I click the button, the screen dims as if a pop up is going to appear, but nothing shows up. Can someone please assist me with this issue?

Here is the HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
   <a href="#" class='btn open-modal' data-modal="#modal1">Open Modal</a>

    <div class='modal' id='modal1'>
      <div class='content'>
        <h1 class='title'>This is a modal</h1>
        <p>
            Here is some text and stuff. cool cool  
        </p>
        <a class='btn close-modal' data-modal="#modal1" href="#">K Bye</a>
      </div>    
    </div>  

        <script
          src="https://code.jquery.com/jquery-3.1.1.min.js"
          integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
          crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <script type="text/javascript" src="script.js"></script>
</body>
</html>

Here is the CSS file:

* {
  box-sizing: border-box;
}

body {
  font-family: "Nunito", sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  padding: 20px 50px;
  display: inline-block;
  background: #EF233C;
  color: white;
  text-decoration: none;
  transition: 0.35s ease-in-out;
  font-weight: 700;
}
.btn:hover {
  background: #dc1029;
}

.overlay {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 40px;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease-in-out;
  max-height: 100vh;
  overflow-y: auto;
}
/* Remaining CSS code remains the same */

<p>JavaScript File:</p>

<pre><code>$(".modal").each( function(){
    $(this).wrap('<div class="overlay"></div>')
});

/*Remaining javascript code remains the same*/

javascript jquery html css

Answer 1

Answer №1

To make the modal visible, you need to use display: block on .overlay .modal.open.

The reason for this is that even when the .open class is added to the .modal, the display: none property of the .modal needs to be overridden by display: block specifically for that .modal in order for it to become visible.

.overlay .modal.open {
  opacity: 1;
  pointer-events: inherit;
  display: block;
  width: 60%;
  height: 60%;
  margin: auto;
}

Refer code:

$(".modal").each(function() {
  $(this).wrap('<div class="overlay"></div>')
});

$(".open-modal").on('click', function(e) {
  e.preventDefault();
  e.stopImmediatePropagation;

  var $this = $(this),
    modal = $($this).data("modal");

  $(modal).parents(".overlay").addClass("open");
  setTimeout(function() {
    $(modal).addClass("open");
  }, 350);

  $(document).on('click', function(e) {
    var target = $(e.target);

    if ($(target).hasClass("overlay")) {
      $(target).find(".modal").each(function() {
        $(this).removeClass("open");
      });
      setTimeout(function() {
        $(target).removeClass("open");
      }, 350);
    }

  });

});

$(".close-modal").on('click', function(e) {
  e.preventDefault();
  e.stopImmediatePropagation;

  var $this = $(this),
    modal = $($this).data("modal");

  $(modal).removeClass("open");
  setTimeout(function() {
    $(modal).parents(".overlay").removeClass("open");
  }, 350);

});

* {
  box-sizing: border-box;
}

body {
  font-family: "Nunito", sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  padding: 20px 50px;
  display: inline-block;
  background: #EF233C;
  color: white;
  text-decoration: none;
  transition: 0.35s ease-in-out;
  font-weight: 700;
}

.btn:hover {
  background: #dc1029;
}

.overlay {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 40px;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease-in-out;
  max-height: 100vh;
  overflow-y: auto;
}

.overlay.open {
  opacity: 1;
  pointer-events: inherit;
}

.overlay .modal {
  background: white;
  text-align: center;
  padding: 40px 80px;
  box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease-in-out;
  max-height: 100vh;
  overflow-y: auto;
}

.overlay .modal.open {
  opacity: 1;
  pointer-events: inherit;
  display: block;
  width: 60%;
  height: 60%;
  margin: auto;
}

.overlay .modal.open .content {
  transform: translate(0, 0px);
  opacity: 1;
}

.overlay .modal .content {
  transform: translate(0, -10px);
  opacity: 0;
  transition: 0.35s ease-in-out;
}

.overlay .modal .title {
  margin-top: 0;
}

<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <!-- the button to call pop up -->
  <a href="#" class='btn open-modal' data-modal="#modal1">Open Modal</a>

  <!-- pop up beginning -->
  <div class='modal' id='modal1'>
    <div class='content'>
      <h1 class='title'>This is a modal</h1>
      <p>
        Here is some text and stuff. cool cool
      </p>
      <a class='btn close-modal' data-modal="#modal1" href="#">K Bye</a>
    </div>
  </div>
  <-- pop up ending -->

    <!-- the jquery script -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript" src="script.js"></script>
</body>

Answer 2

To make the modal visible, you need to use display: block on .overlay .modal.open.

The reason for this is that even when the .open class is added to the .modal, the display: none property of the .modal needs to be overridden by display: block specifically for that .modal in order for it to become visible.

.overlay .modal.open {
  opacity: 1;
  pointer-events: inherit;
  display: block;
  width: 60%;
  height: 60%;
  margin: auto;
}

Refer code:

$(".modal").each(function() {
  $(this).wrap('<div class="overlay"></div>')
});

$(".open-modal").on('click', function(e) {
  e.preventDefault();
  e.stopImmediatePropagation;

  var $this = $(this),
    modal = $($this).data("modal");

  $(modal).parents(".overlay").addClass("open");
  setTimeout(function() {
    $(modal).addClass("open");
  }, 350);

  $(document).on('click', function(e) {
    var target = $(e.target);

    if ($(target).hasClass("overlay")) {
      $(target).find(".modal").each(function() {
        $(this).removeClass("open");
      });
      setTimeout(function() {
        $(target).removeClass("open");
      }, 350);
    }

  });

});

$(".close-modal").on('click', function(e) {
  e.preventDefault();
  e.stopImmediatePropagation;

  var $this = $(this),
    modal = $($this).data("modal");

  $(modal).removeClass("open");
  setTimeout(function() {
    $(modal).parents(".overlay").removeClass("open");
  }, 350);

});

* {
  box-sizing: border-box;
}

body {
  font-family: "Nunito", sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  padding: 20px 50px;
  display: inline-block;
  background: #EF233C;
  color: white;
  text-decoration: none;
  transition: 0.35s ease-in-out;
  font-weight: 700;
}

.btn:hover {
  background: #dc1029;
}

.overlay {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 40px;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease-in-out;
  max-height: 100vh;
  overflow-y: auto;
}

.overlay.open {
  opacity: 1;
  pointer-events: inherit;
}

.overlay .modal {
  background: white;
  text-align: center;
  padding: 40px 80px;
  box-shadow: 0px 1px 10px rgba(255, 255, 255, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: 0.35s ease-in-out;
  max-height: 100vh;
  overflow-y: auto;
}

.overlay .modal.open {
  opacity: 1;
  pointer-events: inherit;
  display: block;
  width: 60%;
  height: 60%;
  margin: auto;
}

.overlay .modal.open .content {
  transform: translate(0, 0px);
  opacity: 1;
}

.overlay .modal .content {
  transform: translate(0, -10px);
  opacity: 0;
  transition: 0.35s ease-in-out;
}

.overlay .modal .title {
  margin-top: 0;
}

<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <!-- the button to call pop up -->
  <a href="#" class='btn open-modal' data-modal="#modal1">Open Modal</a>

  <!-- pop up beginning -->
  <div class='modal' id='modal1'>
    <div class='content'>
      <h1 class='title'>This is a modal</h1>
      <p>
        Here is some text and stuff. cool cool
      </p>
      <a class='btn close-modal' data-modal="#modal1" href="#">K Bye</a>
    </div>
  </div>
  <-- pop up ending -->

    <!-- the jquery script -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script type="text/javascript" src="script.js"></script>
</body>

the pop-up modal function is malfunctioning

Answer №1

Similar questions

Position an element in CSS relative to two other elements

Achieve SEO excellence with Angular 4 in production settings

Properly configuring the root directory to troubleshoot Axios 404 POST issues within a Vue Component coupled with Laravel

Move two markers on Google Maps simultaneously

Retrieving the value from a concealed checkbox

How to Assign List Load to Controller for Google Maps?

Modify data in a table using Dialog Component in Angular Material

declaring a variable in JSP and incorporating it into jQuery

JSLint error: Inconsistent use of spaces and tabs detected

Choose a random element from a string with Javascript

Exploring the use of Shadow DOM in ContentEditable for securing text segments

What is the proper way to create a regex pattern that specifies 'without any spaces'?

Error encountered while trying to retrieve JSON data

`How can I enable the download attribute feature on Safari browser?`

Using jQuery to alter the background position of multiple backgrounds in CSS

Issue with AngularJS ng-model not updating the value of a hidden input

What could be causing certain grid items to display in a disorderly manner?

utilizing Typescript object within an array of objects

The best approach for setting a select value and managing state in React using TypeScript

Learn how to dynamically populate a select2 dropdown with values retrieved from a database using JavaScript or jQuery