- <script>
$(function(){
var appendthis = ("<div class='modal-overlay js-modal-close'></div>");
$('a[data-modal-id]').click(function(e) {
e.preventDefault();
$("body").append(appendthis);
$(".modal-overlay").fadeTo(500, 0.7);
//$(".js-modalbox").fadeIn(500);
var modalBox = $(this).attr('data-modal-id');
$('#'+modalBox).fadeIn($(this).data());
});
$(".js-modal-close, .modal-overlay").click(function() {
$(".modal-box, .modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
});
});
$(window).resize(function() {
$(".modal-box").css({
top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
left: (document.documentElement.clientWidth - $(".modal-box").outerWidth()) / 2
});
});
$(window).resize();
});
</script>
<style>
.modal-box {
display: none;
position: absolute;
z-index: 1000;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 4px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
@media (min-width: 32em) {
.modal-box { }
}
.modal-box header,
.modal-box .modal-header {
padding: 1.25em 1.25em;
border-bottom: 1px solid #ddd;
}
.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; }
.modal-box .modal-body { padding: 1.5em 1.5em; }
.modal-box footer,
.modal-box .modal-footer {
padding: 1em;
border-top: 1px solid #ddd;
background: rgba(0, 0, 0, 0.02);
text-align: right;
}
.modal-overlay {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3) !important;
}
a.close {
line-height: 1;
font-size: 3em;
position: absolute;
top: 1%;
right: 2%;
text-decoration: none;
color: #18181c;
font-weight:bold
}
a.close:hover {
color : #8F9193;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
</style>
Is my jquery
Is the page
I want the popup modal to be centred when you click on an image but they aren't. It isn't taking account of the image widths by the look of it. Standing Side by Side is too far to the right. Any idea what I need to change? Thanks
I think it is taking the first image and centering the modal for that one but not the rest as they are differing widths