如何使 easymodal 居中？

Question

我想用 JS 重新居中 easymodal 模态。使用以下代码创建模态对象：

modal = new ModalMarkus('#create_annotation_dialog');

//here's the definition of ModalMarkus in another file
function ModalMarkus(elem) {
  this.modal_dialog = jQuery(elem).easyModal({
    updateZIndexOnOpen: false
  });
}

这是 create_annotation_dialog 的 HTML：

  <aside class='dialog' id='create_annotation_dialog'> 
      <div>
        <div style="float: left;">
          <p>
            <textarea id='new_annotation_content' onkeyup="updateAnnotationPreview()"></textarea>
          </p>
        </div>
        <div style="float: right">
          <p>
          <h2 id="annotation_preview_title" style="display: none"> <%= t('marker.annotation.preview_title') %></h2>
          </p>
          <p id="annotation_preview" style="display: none; word-wrap: break-word;"></p>
        </div>
      </div>
  </aside>

我想做的是在更改 annotation_preview 和 annotation_preview_title 的可见性时使模式对话框重新居中。我有两个函数，如下所示，我想让它们将模态重新定位到屏幕中央。

function hideAnnotationPreview(){
    document.getElementById("annotation_preview").hide();
    document.getElementById("annotation_preview_title").hide();
}

function showAnnotationPreview(){
    document.getElementById("annotation_preview").show();
    document.getElementById("annotation_preview_title").show();
}

模态框在打开时居中，但我更改了模态框内项目的可见性，结果如下：

Answer 1

想通了。以下是我修改这些函数的方式：

function hideAnnotationPreview(){
    document.getElementById("annotation_preview").hide();
    document.getElementById("annotation_preview_title").hide();
    var dialog = jQuery("#create_annotation_dialog");
    dialog.css("margin-left", -1 * dialog.width() / 2);
}

function showAnnotationPreview(){
    document.getElementById("annotation_preview").show();
    document.getElementById("annotation_preview_title").show();
    var dialog = jQuery("#create_annotation_dialog");
    dialog.css("margin-left", -1 * dialog.width() / 2);
}

如何使 easymodal 居中？

How to recenter an easymodal?

html

javascript

jquery

modal-dialog