Boostrap modal странный вопрос

Question

У меня есть элемент с некоторыми анимациями, сделанными с CSS3. Внутри блока есть ссылка, которая открывает модальное окно, но когда модальное окно закрыто, элемент анимации остается как в состоянии «зависания».

Пример в jsfiddle:

<style> 
    .item-wrap { 
    position: relative; 
    height: 200px; 
    width: 200px; 
    background-color: black; 
    overflow: hidden; 
} 
.item-wrap p { 
    color: #fff; 
    text-align: center; 
} 
.item-wrap::before { 
    content: ' '; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 0; 
    height: 100%; 
    opacity: 0.5; 
    -webkit-transition: width 0s ease, background-color 0.5s ease; 
    -moz-transition: width 0s ease, background-color 0.5s ease; 
    -o-transition: width 0s ease, background-color 0.5s ease; 
    transition: width 0s ease, background-color 0.5s ease; 
} 
.item-wrap::after { 
    content: ' '; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 0; 
    height: 100%; 
    opacity: 0.5; 
    background-color: #fff; 
    transition: width 0.5s ease; 
    -webkit-transition: width 0.5s ease; 
    -moz-transition: width 0.5s ease; 
    -ms-transition: width 0.5s ease; 
    -o-transition: width 0.5s ease; 
} 

.item-wrap:hover::before { 
    width: 100%; 
    background-color: #fff; 
    transition: width 0.5s ease; 
    -webkit-transition: width 0.5s ease; 
    -moz-transition: width 0.5s ease; 
    -ms-transition: width 0.5s ease; 
    -o-transition: width 0.5s ease; 
} 
.item-wrap:hover::after { 
    width: 100%; 
    background-color: transparent; 
    transition: all 0s ease; 
    -webkit-transition: all 0s ease; 
    -moz-transition: all 0s ease; 
    -ms-transition: all 0s ease; 
    -o-transition: all 0s ease; 
} 
.item-wrap:hover .cover { 
    bottom: 0; 
} 
.cover a { 
    color: #fff; 
} 
.link1 { 
    position: absolute; 
    left: 20px; 
    top: 50%; 
    right: 20px; 
} 
.link2 { 
    position: absolute; 
    top: 50%; 
    right: 20px; 
} 
.item-wrap .cover { 
    position: absolute; 
    right: 0; 
    left: 0; 
    bottom: -100%; 
    width: 100%; 
    height: 100%; 
    transition: bottom 0.3s linear; 
    -webkit-transition: bottom 0.3s linear; 
    -moz-transition: bottom 0.3s linear; 
    -ms-transition: bottom 0.3s linear; 
    -o-transition: bottom 0.3s linear; 
    z-index: 10; 
} 
</style> 
    <div class="item"> 
     <div class="item-wrap"> 
     <p>Main content blah blah</p> 
     <div class="cover"> 
      <a href="#" class="link1" data-toggle="modal" data-target="#myModal">Link1</a> 
      <a href="#" class="link2" data-toggle="modal" data-target="#myModal">Link2</a> 
     </div><!-- /.cover --> 
    </div><!-- /.item-wrap --> 
    </div><!-- /.item --> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

Пример INS jsfiddle: https://jsfiddle.net/9objpv9x/

Try парить, чтобы увидеть анимацию и модальные ссылки, а затем нажмите кнопку «LINK1» и закрыть модальный, чтобы увидеть, что произойдет дальше.

Я просто не знаю, с чего начать копать.

Answer 1

На самом деле «link1» остается в «фокусе» состояние и отображается контур из-за по умолчанию собственности начальной загрузки CSS:

a:focus { 
    outline: 5px auto -webkit-focus-ring-color; 
    outline-offset: -2px; 
} 

Чтобы изменить его, измените его в CSS.

a#id:focus { 
    outline: 0px; 
} 

Чтобы удалить состояние фокусировки после модального закрытия, Нам нужно, чтобы вызвать модальный в JQuery вместо того, чтобы «данные-мишень» в HTML.

Проверьте эту ссылку jsfiddle. Updated Code Fix