模態焦點高亮顯示在關閉模態窗口後仍保留在元素上

我有一個模式設置，使用Bootstrap，它工作得很好。模態顯示一些文字和圖像。當我將鼠標懸停在模式元素上時，出現了一個很好的藍色突出顯示，我想保留該突出顯示。問題是，當我關閉模式窗口時，藍色突出顯示位於button上，我想擺脫這種情況。模態焦點高亮顯示在關閉模態窗口後仍保留在元素上

我覺得這個CSS ...

.modal-open .modal, 
.btn:focus{ 
    outline: none !important; 
}

...將消除亮點，但我還是用藍色突出離開後我關閉模式。以下是該模式的代碼...

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button> 
<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Some Title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text about something, Some text about something, Some text about something.</p> 
     <a href='http://codepen.io'><img src='http://lorempixel.com/g/400/200'></a> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div>

在此先感謝您的任何幫助。

來源

2016-03-08 Devon Deason

我認爲你正在尋找的僞類'：active'而不是'：focus' – reinder

這是我第一次嘗試，仍有突出顯示... –

嘗試使用此

$('#myModal').on('shown.bs.modal', function(e){ 
    $('#myModaltrigger').one('focus', function(e){$(this).blur();}); 
});

來源

2016-03-08 05:09:37 Raviteja

這可能也會起作用，但打破可訪問性 – reinder

這是設計，是可訪問性很重要。最後，模態應該返回焦點到啓動元素。如果該按鈕無法獲得焦點，則會破壞鍵盤/選項卡式輔助功能。請參考此github issue。

如果你想刪除發光或藍色的「突出顯示」，我建議在模式顯示/隱藏時切換額外的CSS類。例如：

<button id="openButton" type="button" class="btn btn-info btn-lg btn-no-highlight" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button> 

$(function(){ 
    $('#myModal').on('hidden.bs.modal', function (e) { 
    $('#openButton').toggleClass('btn-no-highlight'); 
    }); 
    $('#myModal').on('shown.bs.modal', function (e) { 
    $('#openButton').toggleClass('btn-no-highlight'); 
    }); 
}); 

.btn.btn-no-highlight { 
    background-color: #5bc0de; 
    border-color: #46b8da; 
    outline: none !important; 
}

我創建了一個小提琴證明這一點：https://jsfiddle.net/e61r4ba3/

來源

2016-03-08 05:12:25 reinder

模態焦點高亮顯示在關閉模態窗口後仍保留在元素上

回答

相關問題