Bootstrap модальный с контентом в виде ссылки на изображение и кнопкой закрытия с перекрытием - как сфокусироваться на кнопке закрытия - PullRequest
Новая
       3

Bootstrap модальный с контентом в виде ссылки на изображение и кнопкой закрытия с перекрытием - как сфокусироваться на кнопке закрытия

0 голосов
/ 12 октября 2019

У меня есть модал с контентом в виде ссылки на изображение и закрывающейся кнопки закрытия. Однако кнопка закрытия не фокусируется. И вместо кнопки закрытия ссылка фокусируется и, следовательно, нажимается.

Пока это моя работа. Все, что я хочу, это кнопка закрытия, чтобы сохранить целую ссылку на изображение. Пожалуйста, помогите в достижении этого. 

$("#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>

1 Ответ

1 голос
/ 12 октября 2019

Вам необходимо удалить pointer-events:none; из .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>
...