Bootstrap 4 - кнопка, открывающая модальное, остается подсвеченной / нажатой после закрытия модального режима - PullRequest
Новая
       3

Bootstrap 4 - кнопка, открывающая модальное, остается подсвеченной / нажатой после закрытия модального режима

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

Я использую кнопку ниже, чтобы открыть модальное

, но после закрытия модального окна оно остается подсвеченным / щелкнутым тенью. Я думал, что просто смогу исправить это, используя модальный обработчик событий ... 

$('#MyModal').on('hide.bs.modal', function() {
  $(".btn-secondary").blur();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<div class="text-center mb-2">
<button type="button" class="btn btn-secondary btn-sm custom" data-toggle="modal" data-target="#MyModal"> 
Button
</button></div>

Функция размытия работает на тестовой кнопке, которая не открывает модальный режим, но не влияет на кнопки, открывающие модальный режим. Как я могу получить кнопки (. Btn-second) , чтобы они больше не выделялись / не нажимались ???

Ответы [ 2 ]

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

Закончено использование решения I , найденного здесь , которое использует якорь, а не кнопку ... ему несколько лет, но лучше всего подходит для моей ситуации 

<div class="text-center mb-2"><a role="button" style="color:white" 
class="btn btn-secondary btn-sm custom"  data-toggle="modal" data-target="#MyModal"</a></div>-->
0 голосов
/ 03 октября 2019

Примените следующий стиль: 

.btn-secondary:focus {
    outline: none !important;
    box-shadow: none;
}

Имейте в виду, что это будет применяться ко всем кнопкам с классом .btn-secondary (который, очевидно, является классом начальной загрузки). Если вы хотите применить стиль только к определенной кнопке, используйте уникальный класс или идентификатор.

...