My bootstrap modal is not displaying on desktop, only showing a faded screen. It works fine on mobile and tablet devices. Any ideas why this might be happening?
Here is the code:
<button type="button" class="btn btn-primary" data-toggle="modal" data-toggle="modal" data-target=".bd-example-modal-lg">Open Modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
{{ module.author_image }}
<p>
{{ module.author_name }}
</p>
{{ module.author_description }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
CSS:
.modal {
text-align: center;
padding: 0!important;
overflow: visible;
display: block;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
body.modal-open {
overflow: visible;
position: absolute;
width: 100%;
height:100%;
}
JS:
$('#myModal').on('shown.bs.modal', function (e) {
$('#myInput').trigger('focus')
})
If anyone has advice or suggestions, they would be greatly appreciated. Thank you! :)