My pulse effect is working perfectly on a regular page, but it's not functioning inside the bootstrap modal. I can't figure out why the modal seems to be blocking this effect. What steps should I take to resolve this issue?
$(document).ready(function() {
// Heart Beat
var timeoutThrottle, back = true;
$('#seventyfive').on('transitionend', function(e) {
clearTimeout(timeoutThrottle);
timeoutThrottle = setTimeout(function() {
back = !back;
pulse(back);
}, 0);
});
var pulse = (function pulse(back) {
$('#seventyfive').toggleClass('heartBeat', back);
return pulse;
})(back);
});.heart {
color: #eb5e28;
-webkit-animation: heathing 1s ease infinite;
animation: heathing 1s ease infinite;
position: absolute;
font-weight: bold;
width: auto;
height: 15px !important;
}
#seventyfive {
position: absolute;
font-weight: bold;
/* margin-left: -22px; */
/* margin-top: 3px; */
font-size: 15px;
opacity: 1;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
}
#seventyfive.heartBeat {
font-size: 16px;
opacity: .5;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">Launch demo modal</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body new-match">
<div class="title">Hi Love <i class="fa fa-heart heart" id="seventyfive"></i></div>
</div>
</div>
</div>
</div>