Question

有没有人知道有一种模式窗口弹出窗口的方法，它可以有一个灵活的宽度（比如屏幕宽度的百分比），它始终居中，至少在它被调用时。

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

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

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

灵活宽度居中的模态窗口

2 个答案: