javascript - 如何让不同尺寸的div在屏幕上居中

Question

我正在尝试制作一个“模态”并且一切正常，除了我第一次打开一个新的模态窗口时，它没有出现在页面的中央。在我第一次打开模式后，所有窗口都显示在屏幕中央。

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 函数中，因此它采用当前对象的宽度和高度。

谢谢。

Answer 1

当模态元素中的资源完全加载时，元素的宽度/高度将发生变化，因此您的计算将是错误的。

很久以前，我创建了类似的东西，并且不得不将占位符图像插入模态框的内容中。然后，我为每个要显示的图像更改了该占位符的 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 将 block 级元素居中。这是一个例子:

.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