I have a modal window with a background image as a background css property. The problem is that the background image appears much faster than the modal itself. How to make make them appear simultaneously?
Here is my HTML code of the modal window:
<div class="modal" id="regModal" tabindex="-1" role="dialog" aria-labelledby="regModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-center modal-carpet" style="min-height: 400px;">
<div class="modal-content"></div>
</div>
</div>
Here is a class .modal:
.modal {
border: none !important;
overflow: hidden;
background-position: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
outline: 0;
background: url('/img/carpet_simple.png') no-repeat fixed center;
}
And so background: url('/img/carpet_simple.png') no-repeat fixed center; appears instantaneously, much faster than the inner HTML code of the modal is rendered.
I tried this solution. It works but it is obviously not a good one. I just make a backgroung image appear 300ml later:
.pic {
background: url('/img/carpet_simple.png') no-repeat fixed center;
}
$('.modal').on('shown.bs.modal', function() {
var timeOutId = setTimeout(function() {
$("#regModal").addClass("pic");
clearTimeout(timeOutId);
delete(timeOutId);
}, 280);
});
$('.modal').on('hide.bs.modal', function() {
$("#regModal").removeClass("pic");
});
How to make a background appear simultaneously with a modal inner html code or at least a little after it? And without my solution.
You can use javascript events for the modal. For example loaded.bs.modal;This event is fired when the modal has loaded content using the remote option.
$('#myModal').on('loaded.bs.modal', function (e) {
// do something...
})
There are other events fired with the modal you can read about here
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments