CODEWITHSUNDEEP
javascripthtmljquerycss
Alex
Alex

Reputation: 63

jquery / js/ html Overlay-Buttons

how can I create more html js buttons, which are linking to different popup content? Below is my example which works quite well with just one popup, but I fail to get a second button working showing different content.

Additionally: is there a way to fetch the content for the button overlay from a seperate html file? 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/semantic.min.css">
<style>
* {
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
.intro {

  height: 100%;
  width: 100%;

}
.intro .content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  margin: -6em -40% 0;
  display: block;
  text-align: center;
}
.intro .content h1 {
  font-size: 3em;
  margin: 0;
  color: #FFF;
}
.intro .content h2 {
  font-size: 2em;
  font-weight: 100;
  margin: 0 0 2em;
  color: rgba(255, 255, 255, 0.5);
}
.overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 100;
  -webkit-transform: scale(1.8);
  -moz-transform: scale(1.8);
  -o-transform: scale(1.8);
  transform: scale(1.8);
}
.overlay.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.overlay h1 {
  color: white;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.smaller {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}
</style>
</head>
<body>

<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<div class="overlay">
  <h1>This is the overlay content.</h1>
</div>

<div class="intro">
  <div class="content">
    <h1>Standard message about awesome thing</h1>
    <a class="ui big inverted blue button" href="#">FIND OUT MORE</a>
    <a class="ui big inverted blue button" href="#">FIND OUT MORE</a>
     </div>
</div>

<script>
$('.button, .overlay').on('click', function(e) {
  e.preventDefault();
  $('.overlay').toggleClass('active');
  $('.content').toggleClass('smaller');

});
</script>

</body>
</html>

Upvotes: 0

Views: 39

Answers (1)

UfguFugullu
UfguFugullu

Reputation: 2147

You can use the data attribute on the overlays and find them by using identifiers in the href attribute of your buttons.

$(document).ready(function() {
  $('.button').on('click', onButtonClick);
  $('.overlay').on('click', onOverlayClick);

  function onButtonClick(event) {
    event.preventDefault();

    var button = $(event.target);

    if (button.length) {
      var targetData = button.attr('href').replace('#', '');
      var overlay = $('.overlay[data-overlay="' + targetData + '"]');
      toggleOverlay(overlay);
    }
  }

  function onOverlayClick(event) {
    var overlay = $(event.target);
    toggleOverlay(overlay);
  }

  function toggleOverlay(overlay) {
    if (overlay.length) {
      overlay.toggleClass('active');
      $('.content').toggleClass('smaller');
    }
  }

});
* {
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

.intro {
  height: 100%;
  width: 100%;
}

.intro .content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  margin: -6em -40% 0;
  display: block;
  text-align: center;
}

.intro .content h1 {
  font-size: 3em;
  margin: 0;
  color: #FFF;
}

.intro .content h2 {
  font-size: 2em;
  font-weight: 100;
  margin: 0 0 2em;
  color: rgba(255, 255, 255, 0.5);
}

.overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  z-index: 100;
  -webkit-transform: scale(1.8);
  -moz-transform: scale(1.8);
  -o-transform: scale(1.8);
  transform: scale(1.8);
}

.overlay.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.overlay h1 {
  color: white;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.smaller {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.2/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="overlay" data-overlay="default">
  <h1>This is the overlay content.</h1>
</div>

<div class="overlay" data-overlay="another">
  <h1>This is another overlay content.</h1>
</div>

<div class="intro">
  <div class="content">
    <h1>Standard message about awesome thing</h1>
    <a class="ui big inverted blue button" href="#default">FIND OUT MORE</a>
    <a class="ui big inverted blue button" href="#another">FIND OUT ANOTHER</a>
  </div>
</div>

Upvotes: 1

Related Questions