I'm using jQuery Remodal in combination with PHP. I'm displaying the jQuery code for launching when the page loads with some server-side variables. I've used Remodal for years, without a problem. But I'm experiencing some odd behavior that is intermittent.
Basically, 50% of the time, the modal fires and behaves expectedly, but other times, the page scrollbar goes away (Remodal launch), no Remodal window, and the console says 'opened.' I hit refresh, same thing happened. I hit refresh, and the modal appears. I hit refresh again, no modal. Very strange.
$(function() {
var options = {
hashTracking: false,
};
var bundleModal = $('[data-remodal-id=BundleModal]').remodal(options);
console.log(bundleModal.getState());
bundleModal.close();
console.log(bundleModal.getState());
bundleModal.open();
console.log(bundleModal.getState());
$('.modal-reconfigure').click(function() {
bundleModal.close();
bundleModal.destroy();
});
$('.modal-add').click(function() {
$('form#bundleprocess').submit();
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal-default-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.js"></script>
<div class="remodal" data-remodal-id="BundleModal">
Your Bundle Is Complete!<br /><br />
<div clasS="row">
<div class="col-md-6">
<a href="javascript:;" class="modal-add btn radius orange blob">Add Bundle To Cart</a>
</div>
<div class="col-md-6">
<a href="javascript:;" class="modal-reconfigure btn radius grey">Reconfigure</a>
</div>
</div>
</div>When I reload the page and I have the issue, the console says:
closed
closed
opened
So it partially opens since the scrollbar goes away. Opacity layer doesn't show. Obviously the div doesn't appear. But again, if I hit refresh a few times, it may show. Very intermittent.
Any ideas?
