如何重新定位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);
}