wimbarelds
Can not initialize plugin in Bootstrap 4 modal popup
<div class="modal fade" id="modal{{ $id}}" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true"> <script> $(document).ready(function(){ /** * initialize TimerCircle library */ $(".example").TimeCircles({ animation: "smooth", count_past_zero: false, // circle_bg_color: "#000000", use_background: false, total_duration: "Auto", start_angle: 0, time: { Days: { color: "#ffa500" }, Hours: { color: "#ffa500" }, Minutes: { color: "#ffa500" }, Seconds: { color: "#ffa500" } } }); }); </script> <div class="example" data-timer="111"></div> <div class="modal-dialog" role="document"> <div class="modal-content roll-item-modal text-center"> <div class="modal-header ">
it will not work, but out of modal everything is great.
Here is code generated from modal popup
<div class="example" data-timer="111" data-tc-id="0370ca57-aa89-bf87-825b-91a990b81e3a">
<div class="time_circles">
<canvas width="0" height="0"></canvas>
<div class="textDiv_Days" style="top: 0px; left: 0px; width: 0px;">
<h4 style="font-size: 0px;">Days</h4>
<span style="font-size: 0px;">0</span>
</div><div class="textDiv_Hours" style="top: 0px; left: 0px; width: 0px;">
<h4 style="font-size: 0px;">Hours</h4>
<span style="font-size: 0px;">0</span>
</div>
<div class="textDiv_Minutes" style="top: 0px; left: 0px; width: 0px;">
<h4 style="font-size: 0px;">Minutes</h4>
<span style="font-size: 0px;">0</span>
</div>
<div class="textDiv_Seconds" style="top: 0px; left: 0px; width: 0px;">
<h4 style="font-size: 0px;">Seconds</h4>
<span style="font-size: 0px;">17</span>
it has everything 0px
<div class="textDiv_<canvas width="0" height="0">
Seconds" style="top: 0px; left: 0px; width: 0px;">
<h4 style="font-size: 0px;">Seconds
<span style="font-size: 0px;">17
As we can see, time is 17 seconds, so timer working, i have checked it countdowns. But not displayed.
Timer for different popups different.
Also i have tried initialize before timer, does not helped
I found that, timer displayed when modal window is set to
<div class="modal fade" id="modal{{ $id}}" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true" style="position:relative; display:block;">
But it breaks everything.
How may fix?
