How to define functionality "materializecss" modal "before" (beforeload)
I have used materializecss but am stuck with modal functionality.
I made a popup modal for an image with the following code:
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;
}
But the problem is that both image and modal (wrapper) ways don't align in center
. And the modal wrapper also doesn't respond like fancybox popup
I tried this code for the 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'
});
}
});
does not work, please help.
Thanks in advance!
source to share
Sorry for my earlier answer, I thought you weren't getting the modal to work at all ...
You've used some CSS rules that affect the responsiveness and width of the modal, and to center-align content in modal mode, you just need a different rule. Just changed the CSS, replaced the images and added a class btn
- you can run the snippet and hit Full Page to see how it works.
$('.modal-trigger').leanModal();
.media-insert .modal {
max-height: 100%;
overflow: visible;
}
.media-insert .modal .modal-content {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<div class="media-insert">
<a href="#img2" class="btn modal-trigger">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc768be1b3c" class="img-responsive" />
</a>
<div class="modal" id="img2">
<div class="modal-content">
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc768be1b3c" class="img-responsive" /> <a href="javascript:void(0);" class="modal-action modal-close"><span class="mdi-navigation-close"></span></a>
</div>
</div>
</div>
Their documenting modal buttons with buttons might help you.
source to share