CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Opeyemi Odedeyi
Opeyemi Odedeyi

Reputation: 770

the pop up modal isnt working

i have a pop up that doesnt work. when i click on the button the screen dims like a pop up is about to appear but no pop up appears. please help!!!

this 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>
   <!-- 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>
        </html>

this 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;
          }
          .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;
          }
          .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;
          }

javascript file

        $(".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);

        });

Upvotes: 0

Views: 211

Answers (1)

nashcheez
nashcheez

Reputation: 5183

You have to apply display: block to .overlay .modal.open.

This is because even when your .open class is appended to your .modal, display: none from .modal needs to be overriden by display: block for that particular .modal to be 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>

Upvotes: 1

Related Questions