Create a popup modal with an image that stays fixed near top of page?

I am trying to create a popup that shows an image and has some text above and below it (the image) with buttons overlaying the image.

I somewhat have it doing what I want but not in the correct way. I definitely have too many styling attributes which is overly complicating things and I cannot get an text to show above or below the image. All text is going directly on top of the image (and near the top of the image).

This is the component that needs to be a popup modal:

<template>
    <div id="myModal" class="modal" >
        <div class="modal-content">
          <button class="close" @click.native="onClickCloseModal">x</button>
          <div v-if="this.currentPhotoIndex > 0" class="left_btn" @click.native="onClickLeft">{{"LEFT <" }}</div>
          <div v-if="this.currentPhotoIndex < this.gallery.length-1" class="right_btn" @click.native="onClickRight">{{"RIGHT >" }}</div>
          <img src="" id="modal-image" style=""/>
        </div>
    </div>
</template>

Here is how I style it:

<style scoped>
/* Modal -------------------*/
.modal {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 1000; /* Sit on top */
  margin: auto; /* Location of the box */
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: scroll; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  position: relative;
  overflow: scroll;
  justify-content: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#modal-image {
  position:fixed; 
  width:90%;
  height:auto;
  max-height: 970px;
  left:5%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.close {
  position: fixed;
  height:2.7em;
  width: 2.7em;
  border-radius: 50%;
  font-size: 1.0em;
  z-index: 100;
  top: 10%;
  cursor: pointer;
  pointer-events: auto;
}

.close:hover {
  background-color: #df2c14;
  color: white;
}

.left_btn {
  position: fixed;
  padding: 8px;
  border-radius: 50%;
  font-size: 1.0em;
  z-index: 100;
  top: 10%;
  left: 8%;
  cursor: pointer;
  pointer-events: auto;
  font-weight: bold;
  color: teal;
  padding: 10px;
  font-size: larger;
  background-color: aliceblue;
}

.left_btn:hover {
  background-color: teal;
  color: white;
}

.right_btn {
  position: fixed;
  padding: 8px;
  border-radius: 50%;
  font-size: 1.0em;
  z-index: 100;
  top: 10%;
  right: 8%;
  cursor: pointer;
  pointer-events: auto;
  font-weight: bold;
  color: teal;
  font-size: larger;
  background-color: aliceblue;
}

.right_btn:hover {
  background-color: teal;
  color: white;
}
/* ---------------------------- */
</style>

And the popup modal is used to show gallery images so this is the function I have that makes the popup visible:

      changePhoto() {
        if (this.currentPhotoIndex == null) {
          return
        }
        var modal = document.getElementById("myModal");
        var modalImage = document.getElementById("modal-image");
        modal.style.display = "block";
        modalImage.src = this.gallery[this.currentPhotoIndex]
        console.log('showing photo index ' + this.currentPhotoIndex)
      }

So what is going on? It seems simple but I've been stuck on this for days.

Here is an unrelated example that I think is similar to what kind of structure I need to the modal:

So a popup modal like in the picture would be perfect if I can get the image to stay within the bound of the popup and then I can easily add text below or above the image but still WITHIN the popup modal borders.