灵活宽度居中模态窗口

Question

有谁知道有一种方法可以让模态窗口弹出窗口具有灵活的宽度（例如屏幕宽度的％），并且始终居中，至少在调用它时是这样。

我准备用 js/jQuery 自己编写这个代码（通过一个可以发送最小宽度、百分比和最大宽度的函数），但我想知道预制的解决方案以避免重新发明轮子（特别是如果它们没有带来繁琐的框架）。

现在我在 Windows 上使用 jqModal，我喜欢它的简单性

Answer 1

您是否尝试过 jquery 模式选项

对话框的宽度（以像素为单位）。

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

http://jqueryui.com/demos/dialog/#option-width

Answer 2

这是我设计的一种方法，用于创建具有您描述的所有功能的流体模式，而且作为奖励，它在 95% 的情况下甚至不需要任何 JavaScript，只需要 HTML 和 CSS！ - http://www .backalleycoder.com/2011/11/16/best-damn-modal-method-period%E2%84%A2/ - 下面我粘贴了它使用的 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>

您需要的 CSS：

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;
}