我正在尝试制作一个“模态”,一切正常,除了我第一次打开一个新的模态窗口时,它不会出现在页面的中心。在我第一次打开模态后,所有窗口都显示在屏幕中央。
HTML:
<div id="modal3" class="galleryContent">
<div class="modalheader">
<h3>Imagen 2</h3>
<span class="fa fa-close"></span>
</div>
<div class="contenidomodal">
<p>La imagen número 1 reprensta al profesor Sebastian.</p>
<img src="img/copy_mcrepeatsalot.png" alt="Sebastian">
</div>
<div class="modalfooter">
<button type="button" class="btn btn-default">Cerrar</button>
</div>
</div>
的jQuery
<script> var $overlay = $('<div id="overlay"></div>') $("body").append($overlay); $(document).ready(function(){ $("#imageGallery a").click(function(event){ event.preventDefault(); var $target = $(this).attr("data-target"); var $altura = $(".galleryContent").height(); var $anchura = $(".galleryContent").width(); $(".galleryContent").css("margin-top", - $altura/2); $(".galleryContent").css("margin-left", - $anchura/2); $overlay.fadeIn(); $($target).fadeIn(); $("#overlay").click(function(){ $($target).fadeOut(); $overlay.fadeOut(); }); $(".fa-close").click(function(){ $($target).fadeOut(); $overlay.fadeOut(); }); $(".modalfooter button").click(function(){ $($target).fadeOut(); $overlay.fadeOut(); }); }); }); </script>
变量$ altura和$ anchura = height和width在click函数内部,因此它取当前对象的宽度和高度。
感谢。
答案 0 :(得分:1)
当模态元素中的资源完全加载时,元素的宽度/高度将发生变化,因此您的计算将是错误的。
很久以前我创建了类似的东西,并且必须在模态的内容中插入一个占位符图像。然后我为我想要显示的每个图像更改了占位符的 src 属性。但是,在显示模态之前,我等待图像加载。以下是该项目的一些链接:
如果您只支持现代浏览器,则可以仅使用CSS将块级元素居中。这是一个例子:
.modal {
position: fixed;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
答案 1 :(得分:0)
我的猜测是当你调用.height()时,内容尚未呈现和调整大小。当fadeIn完成或至少开始时,你会想要这样做。或者,使用margin: auto;
通常适用于此类事情。