Javascript 灵活的以宽度为中心的模态窗口

是否有人知道一种方法，可以使模式窗口弹出窗口具有灵活的宽度（例如屏幕宽度的%），至少在调用时始终居中

我将自己在js/jQuery中编写这段代码（通过一个函数，您可以将min width、percentage和max width发送给它），但我想知道如何使用预先制作的解决方案来避免重新发明轮子（特别是如果它们没有使用繁琐的框架）

---

现在我正在为windows使用jqModal，我喜欢它的简单性

您尝试过jquery模式选项吗

对话框的宽度，以像素为单位

$( ".selector" ).dialog({ width: 460 });

---

我设计了一种方法来创建具有您描述的所有功能的流体模型，作为奖励，它在95%的情况下甚至不需要任何JavaScript，只需要HTML和CSS下面我粘贴了它使用的HTML和CSS，这篇博文包含了更长、更详细的解释和一个实时演示

HTML结构：

<table id="modal">
  <tbody id="modal-tbody">
    <tr id="modal-tr">
      <td id="modal-td">
        <div id="modal-content">
            <div id="modal-body">
               Some modalicious content here for your  viewing  pleasure!
            </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

html, body
{
    height: 100%; /* root and body MUST be height 100% */
}

#modal
{
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
}

#modal-tbody, #modal-tr, #modal-td
{
    height: 100%; /* All table elements should be height 100% */
}

#modal-td
{
    vertical-align: middle;
}

#modal-content
{
    position: relative;
    left: 100%;
    height: auto; /* HEIGHT optional, any unit */
    width: 50%; /* WIDTH optional, any unit */
    max-height: 80%; /* MAX-HEIGHT optional, if height auto, must be % */
    min-height: 80px; /* MIN-HEIGHT optional, any unit */
    max-width: 225px; /* MAX-WIDTH optional, any unit */
    min-width: 80px; /* MIN-WIDTH optional, any unit */
    margin: 0 auto;
    border: 1px solid;
    background: #eaeaea;
    overflow: auto;
}