Trying to implement the modal functionality in my project using the materializecss framework but facing some challenges.
I have created a popup modal for an image with the code below:
HTML:
<div class="media-insert"> <a href="#img2" class="modal-trigger"><img src="images/slide1.jpg" class="img-responsive" /></a>
<div class="modal" id="img2">
<div class="modal-content"> <img src="images/slide1.jpg" class="img-responsive" /> <a href="javascript:void(0);" class="modal-action modal-close"><span class="mdi-navigation-close"></span></a> </div>
</div>
</div>
JS:
$('.modal-trigger').leanModal();
CSS:
.media-insert .modal {
width: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
max-height: 100%;
overflow: visible;
}
Encountering an issue where the image and modal wrapper are not aligned at the center. Additionally, the modal wrapper is not responsive like the fancybox popup.
Attempted to use the following code for callback:
$('.modal-trigger').leanModal({
ready: function () {
var modelImgW = $('.modal-content img').innerWidth();
var modelImgH = $('.modal-content img').innerHeight();
$('.media-insert .model').css({
'height': modelImgH + 'px'
});
$('.media-insert .model').css({
'width': modelImgW + 'px'
});
}
});
Still unable to resolve the issue. Any assistance would be greatly appreciated.
Thank you in advance!