<template>
  <div>
    <div @click="showAbModal('abModal')"> Show Modal</div>
                  <!-- Modal -->
      <div v-if="abModal" id="ytModal" class="flex justify-center abModal">
          <div class="modal-content" @click="doNothing()">
              <span  @click="hideAbModal" class="close">&times;</span>
              <div>
                Modal text    Modal text    Modal text<br>  Modal text    Modal text    Modal text 
              </div>
          </div>
      </div>
  </div>
</template>

<script>

export default {

  data() {
      return {
        abModal:false,
          abID:''

      }
  },
  methods: {
      showAbModal(abID){
          this.abModal=true
          this.abID=abID
      },
      hideAbModal(){
          this.abModal=false
      //     // this.abID=abID
      },
      doNothing(){
        // alert();
      }
 
  },
      mounted: function () {
        //   this.getVideos()
      }   
}
</script>

<style scoped>

.abModal {
/* display: none;  */
position: fixed;
width: 80%;
z-index: 999991;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
  background-color: aliceblue;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  margin: 0 auto;
}
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>