Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Position

Positioning Buttons Next To Image

Post a Comment
I already asked a similar question, but now I have changed a few styles and have no idea how I can position the close button to the top-right corner of the image as well as the pre

Solution 1:

I have ruled out your CSS. Because it's really messy. But If you check this code below, you could understand how to set positioning. Hope you can do the rest of the work.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #modal-content{
      position: relative;
      width:50%;
      height:50%;
    }
    #modal-image{
      width:100%;
      height:auto;
    }
    #close{
      position: absolute;
      right: 0px;
      top: 0px;
    }
    #previous{
      position: absolute;
      top: 50%;
      left: 1%;
      
    }
    #next{
      position: absolute;
      top: 50%;
      right: 1%;
      
    }
  </style>
</head>
<body>
  <div class="modal" id="modal">
    <div id="modal-content">
        
        
        <img id="modal-image" src="https://dummyimage.com/vga" alt="">
        <span class="gallery-button" id="close">✖</span>
        <span class="gallery-button" id="previous">◄</span>
        <span class="gallery-button" id="next">►</span>
        
    </div>
</div>
<script>
  function showModal(directory, response, i) {
    modal.style.display = "block";
    modalImg.src = document.getElementById(path(directory, response[i])).src;

    /* previousButton.style.display = "block"; */
    /* nextButton.style.display = "block"; */
}
</script>
</body>
</html>

Update code (as a requirement)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #modal{
          width:100vw;
          height: 100vh;
      }
    #modal-content{
      position: relative;
      width:35%;
      height:90%;
    }
    #modal-image{
      width:100%;
      height:100%;
    }
    #close{
      position: absolute;
      right: 0px;
      top: 0px;
    }
    #previous{
      position: absolute;
      top: 50%;
      left: 1%;
      
    }
    #next{
      position: absolute;
      top: 50%;
      right: 1%;
      
    }
  </style>
</head>
<body>
  <div class="modal" id="modal">
    <div id="modal-content">
        
        
        <img id="modal-image" src="https://dummyimage.com/vga" alt="">
        <span class="gallery-button" id="close">✖</span>
        <span class="gallery-button" id="previous">◄</span>
        <span class="gallery-button" id="next">►</span>
        
    </div>
</div>
<script>
  function showModal(directory, response, i) {
    modal.style.display = "block";
    modalImg.src = document.getElementById(path(directory, response[i])).src;

    /* previousButton.style.display = "block"; */
    /* nextButton.style.display = "block"; */
}
</script>
</body>
</html>

Post a Comment for "Positioning Buttons Next To Image"