CODEWITHSUNDEEP
javascriptmodal-dialoggallery
CodeFem
CodeFem

Reputation: 5

How do I change this code for a modal so that it works with class instead of href?

I am working on a one page portfolio. When any of the boxes are clicked a photo gallery will pop up.

.wrapper{
    margin-top:125px;
}
img {
    display:block;
    width:100%;
    height:auto;
}
.portfolio-box {
    display:flex;
    flex-wrap:wrap;
    flex:1;
    flex-direction:row;
    justify-content:center;
}
.portfolio-box > div {
    display:flex;
    justify-content:flex-start;
    flex:1;
    flex-direction:column;
    margin:5px;
    margin-bottom: 40px;
}
.thumb-outer{
    /*Just a  placeholder*/
}
.thumbgrid{
    position:relative;
    display:inline-block;
}
.thumbgrid .inner_box{
    position: absolute;
    width:100.1%;
    height:100%;
    background:rgba(80, 145, 144, 0.64);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border:1px solid #000;
    border-radius:2px;
}
.thumbgrid .inner_box span{
    color:#4f9190;
    font-family:bonvenocf-light;
    font-weight:bold;
    font-size:16px;
    text-align: center;
    background:#fff;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:101.2%;
}
.synopsis{
    vertical-align:top;
    text-align:justify;
    margin:0 3px 0 3px;
    display: inline-block;
}
<div class="wrapper">

<section>
<!--Start of Portfolio-->
<div class="portfolio-box">
<!--Thumb 1-->
<div class="thumb-outer">
<div class="thumbgrid">
  <img src="https://i0.wp.com/ukhumanrightsblog.com/wp-content/uploads/2013/06/seo-marketing-320x200.jpg">
  <div class="inner_box">
  <span>Title 1</span>
</div>
</div>
   <div class="synopsis">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat diam eget magna dignissim malesuada.
     </div>
</div>
<!--End Of Thumb-->

<!--Thumb 2-->
<div class="thumb-outer">
<div class="thumbgrid">
  <img src="https://i0.wp.com/ukhumanrightsblog.com/wp-content/uploads/2013/06/seo-marketing-320x200.jpg">
  <div class="inner_box">
  <span>Title 2</span>
</div>
</div>
   <div class="synopsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat diam eget magna dignissim malesuada.
     </div>
</div>
<!--End Of Thumb-->

<!--Thumb 3-->
<div class="thumb-outer">
<div class="thumbgrid">
  <img src="https://i0.wp.com/ukhumanrightsblog.com/wp-content/uploads/2013/06/seo-marketing-320x200.jpg">
  <div class="inner_box">
  <span>Title 3</span>
</div>
</div>
   <div class="synopsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat diam eget magna dignissim malesuada.
     </div>
</div>
<!--End Of Thumb-->

<!--Thumb 4-->
<div class="thumb-outer">
<div class="thumbgrid">
  <img src="https://i0.wp.com/ukhumanrightsblog.com/wp-content/uploads/2013/06/seo-marketing-320x200.jpg">
  <div class="inner_box">
  <span>Title 4</span>
</div>
</div>
   <div class="synopsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat diam eget magna dignissim malesuada.
     </div>
</div>
<!--End Of Thumb-->

</div><!--End of Portfolio-->
</div>

I found 2 codes that I could use to open the galleries in a modal but neither give me my desired result. The code below opens the modal via class but for some reason the close X button isn't working nor is the modal closing when you click outside of the image.

// Get the modal
var modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn");


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");

// When the user clicks the button, open the modal 
btn[0].onclick = function() {
    modal[0].style.display = "block";
}

btn[1].onclick = function() {
    modal[1].style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span[0].onclick = function() {
    modal[0].style.display = "none";
}

span[1].onclick = function() {
    modal[1].style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
img{
width:100%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}
/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 80%;
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: red;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<button class="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
      <span class="close">×</span>
<img src="https://cdn-images-1.medium.com/max/2000/1*6cpWeq1_VMYtd1LgHwxKug.jpeg">
  </div>

</div>

The code below works perfectly but it opens the modal via href. From what I've read divs can't be made into links. I tried messing around with both codes in hopes that I could get one to work right but I am still learning Javascript and was unable to get either right.

I'm hoping to get some help with either code. With the 1st modal I would like for the close button and closing by clicking outside of the modal to work. With the 2nd code I would like to be able to use class to open the modal instead of an anchor tag so that when the user clicks on the divs it opens the gallery modal. 

// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
 btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
 }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
 spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
    }
 }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
     for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
     }
    }
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
img{
width:100%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}
/* Modal Content */
.modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 80%;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
<button class="modal-button" href="#myModal1">Open Modal</button>

<!-- The Modal -->
<div id="myModal1" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
      <span class="close">×</span>
<img src="https://cdn-images-1.medium.com/max/1000/1*6cpWeq1_VMYtd1LgHwxKug.jpeg">
  </div>

</div>

Upvotes: 0

Views: 52

Answers (1)

Bibberty
Bibberty

Reputation: 4768

Your window.click was cancelling everything.

EDIT: Fixed to ensure outside of modal closes correctly. NOTE: Removed window.click as not required.

document.addEventListener('DOMContentLoaded', function() {

  let modal = document.querySelector('.modal');
  let modalContent = document.querySelector('.modal-content');
  let btn = document.querySelector('.myBtn');
  let closeSpan = document.querySelector('.close');
  
  btn.addEventListener('click', function() {
    console.log('btn click');
    console.log(modal);
    modal.style.display = 'block';    
  });
  
  closeSpan.addEventListener('click', function() {
    modal.style.display = 'none';  
  });
  
  modal.addEventListener('click', function(event) {
    console.log(event.target.id);
    if(event.target.id === 'myModal') }
      modal.style.display = 'none';
    } 
  });  
});
body {
  font-family: Arial, Helvetica, sans-serif;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

img {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}


/* Modal Content */

.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 80%;
}


/* Add Animation */

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}


/* The Close Button */

.close {
  color: red;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<button class="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <img src="https://cdn-images-1.medium.com/max/2000/1*6cpWeq1_VMYtd1LgHwxKug.jpeg">
  </div>

</div>

Upvotes: 1

Related Questions