Jquery UI modal（弹出框）控制大小和默认隐藏答案

【问题标题】：Jquery UI modal (popup box) control size and hide by defaultJquery UI modal（弹出框）控制大小和默认隐藏
【发布时间】：2012-04-15 04:20:48
【问题描述】：

我目前正在使用 bootstrap modal，这是一个用于创建弹出框的 jQuery 插件。（如果有人想查看非常短的文档，这里是link to it - 它非常短，所以只需要一分钟）。

很遗憾，我遇到了几个问题：

我需要能够定义模态弹出框的大小。我尝试了以下方法，但显示不正确：

<div class="modal" id="myModal" style="width: 800px; height: 900px;">
我需要能够默认隐藏模式。目前，它会在页面加载后立即显示。我尝试了以下方法，但它似乎没有正确隐藏：

$(document).ready(function() { $('#myModal').modal("hide"); });

知道如何解决这些问题吗？

【问题讨论】：

【解决方案1】：

答案 1：尝试定义模态 CSS 类并设置宽度和高度。答案2：调用modal函数时，传入一个option对象，属性“show”为false。

$("#myModal").modal({show: false});

答案 3：您可以处理“显示”事件并将其连接起来以对网页进行 AJAX 调用并将结果设置为 div 的内部 HTML。

【讨论】：

【解决方案2】：

在源代码中尝试以下操作。为我工作。

  $('#ModalForm').dialog(
   {
        modal : true ,
        autoOpen : false ,
        height : 300,
        width : 400,
. . . .

【讨论】：

【解决方案3】：

试试这个

<div class="modal" id="myModal" style="width:800px;height:900px;display:none;">

【讨论】：

【解决方案4】：

要回答第二个问题，文档说您可以添加一个类似 $('#myModal').modal({'show':false}) 的选项，以便在初始化时不显示它。

第三个问题的答案是使用 iframe 或使用 ajax 加载 html。要阻止人们提交，您可以为此使用 javascript 或放置一个明确的 div 以防止任何人实际使用它。第一种方法假设您从同一个域加载表单。

试试这个以强制尺寸为你想要的$('#myModal').modal({'show':false).height('600px').width('500px');

【讨论】：

【解决方案5】：

您可以将.hide 类提供给模态框的容器来隐藏它，这是隐藏模态框的默认引导方法。至于大小，您可以再次向容器提供具有自定义宽度和高度的您自己的类，它应该占用它，您将它内联添加的方式现在也可以正常工作，只需确保将其添加到主容器。

所以你所有的模态容器应该是这样的：

<div class="modal hide fade custom-size" id="myModal"> ... </div>

注意：添加了 .fade 类来添加过渡淡入淡出/滑动效果，如果您不想要这些效果，可以将其移除。

至于一旦加载页面就会弹出模态框，您需要做的就是消除这种行为，而不是像现在这样调用模态框，这样只有在您单击操作时才会弹出模态框或“启动模式”按钮。

这是一个清理过的小提琴，你有一些无效的样式，比如float:center（我希望存在一个）：http://jsfiddle.net/zkzuM/2/，整页演示：http://jsfiddle.net/zkzuM/2/show/

【讨论】：

@user782104 忘了添加，模态框是由 css 定位的，所以你给它的任何宽度都必须减去它的一半，就像负的 margin-left 声明一样，所以如果你说 width: 800px ，减去一半，就像margin-left:-400px。此计算是在引导程序的.modal 类上完成的，该类具有固定的模态宽度，这是一个带有模态的演示 width: 960px、jsfiddle.net/zkzuM/14/show ..从 url 中删除“/show/”部分编辑小提琴。

【解决方案6】：

#myModal{
    height:200px;
    width:100px;
}

尝试在 css 中添加类似的内容

你的 JavaScript

$('#myModal').modal({'show':false});

【讨论】：

【解决方案7】：

看看fiddle 及其result。

.modal-body 类的最大高度为 400 像素。如果你想要一个静态高度为 900 像素，你应该设置 .modal-body 的高度和最大高度。否则，关闭按钮及其栏可能会浮在框上。

#myModal .modal-body {
  height: 775px;
  max-height: 800px;
}

由于盒子模型的边距和填充，高 900 像素的 #myModal 为 775 像素。它总是短 125 像素。如果你想让它动态化，你可以写这样的东西：

$('#myModal .modal-body').height($('#myModal').height()-125);

【讨论】：

【解决方案8】：

【讨论】：