我正在尝试制作一个“模态”,并且除了我第一次打开一个新的模态窗口外,其他所有东西都工作正常,它没有出现在页面中央。第一次打开模态后,所有窗口都居中显示在屏幕上。
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 =高度和宽度位于click函数内部,因此它将获取当前对象的宽度和高度。
谢谢。
最佳答案
当模态元素内的资产完全加载时,元素的宽度/高度将改变,因此您的计算将是错误的。
很久以前,我创建了类似的东西,并且不得不在模式的内容中插入一个占位符图像。然后,我为每个要显示的图像更改了占位符的src属性。但是,在显示模态之前,我等待图像加载。以下是该项目的一些链接:
https://github.com/vasilionjea/jQuery-Ezbox--v0.0.3-/blob/master/ezbox.js#L73
https://github.com/vasilionjea/jQuery-Ezbox--v0.0.3-/blob/master/ezbox.js#L164
但是,如果仅支持现代浏览器,则只能将CSS放在块级元素的中央。这是一个例子:
.modal {
position: fixed;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
实时示例:http://jsbin.com/rawomasaqo/1/edit?css,output
关于javascript - 如何在屏幕上将不同大小的div居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28311409/