I am attempting to display a modal exclusively on mobile devices.
Despite my confidence in the correctness of my JavaScript, it is not functioning as expected.
Would anyone be willing to review and provide assistance?
<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
<figure class="cap-left">
<img src="http://www.classichits.ie/wp-content/uploads/2016/12/house.png" class="img-fluid">
<a href="#myModal" role="button" data-toggle="modal"><figcaption>
The house is a converted farm building featuring traditional wooden shutters and terracotta roof tiles
</figcaption></a>
</figure>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="#myModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Here is a Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Here goes the content of the modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Save</button>
</div>
</div>
</div>
</div>
JS
$('#myModal').on('show.bs.modal', function () {
$('#myInput').focus()
})
$("img").click(function() {
if ($(window).clientWidth() < 768) {
$('.modal-body').html($('figcaption').text());
$('#myModal').modal('show');
}
});
At this time, there are no CSS styles impacting it.
Thank you