CODEWITHSUNDEEP
htmlcssbootstrap-modal
Arushi Rajput
Arushi Rajput

Reputation: 109

Bootstrap modal with content as image link and overlap close button - how to focus on close button

I have a modal with content as an image-link and overlapping close button. However, the close button is not getting focused. And instead of the close button, the link is focused and hence getting clicked.

This is my work so far. All I want is the close button to be focused while keeping the full image link intact. Please help in achieving it.

$("#adModalLarge").modal("show");
.modal-full .close {
  position: absolute;
  top: 5px;
  right: 25px;
  font-size: 60px;
  font-weight: bolder;
  transition: 0.3s;
  z-index: 9!important;
  opacity: 0.6;
}

.modal-lg .close {
  position: absolute;
  top: 5px;
  right: 25px;
  font-size: 40px;
  font-weight: bolder;
  transition: 0.3s;
  z-index: 9!important;
  opacity: 0.6;
}

.close:hover,
.close:focus {
  opacity: 0.9!important;
  text-decoration: none;
  cursor: pointer;
}

.viewindex {
  z-index: 999999999!important
}

.modal-full {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0;
}

.modal-full .modal-content {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div aria-hidden="true" aria-labelledby="adModalLargeLabel" class="modal fade pl-0 viewindex" id="adModalLarge" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-full" role="document">
    <span class="close" data-dismiss="modal">×</span>
    <a href="https://www.example2.com" target="_blank"><img src="https://www.insaid.co/wp-content/uploads/2019/10/2-1.png" alt="" class="modal-content"></a>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Upvotes: 0

Views: 245

Answers (1)

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

You need to remove pointer-events:none; from .modal-dialog

$("#adModalLarge").modal("show");
.modal-dialog {
  pointer-events: auto !important;
}

.modal-full .close {
  position: absolute;
  top: 5px;
  right: 25px;
  font-size: 60px;
  font-weight: bolder;
  transition: 0.3s;
  z-index: 9!important;
  opacity: 0.6;
}

.modal-lg .close {
  position: absolute;
  top: 5px;
  right: 25px;
  font-size: 40px;
  font-weight: bolder;
  transition: 0.3s;
  z-index: 9!important;
  opacity: 0.6;
}

.close:hover,
.close:focus {
  opacity: 0.9!important;
  text-decoration: none;
  cursor: pointer;
}

.viewindex {
  z-index: 99999 !important
}

.modal-full {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0;
}

.modal-full .modal-content {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div aria-hidden="true" aria-labelledby="adModalLargeLabel" class="modal fade pl-0 viewindex" id="adModalLarge" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-full" role="document">
    <div class="close" data-dismiss="modal">×</div>
    <a href="https://www.example2.com" target="_blank"><img src="https://www.insaid.co/wp-content/uploads/2019/10/2-1.png" alt="" class="modal-content"></a>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions