Question

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

不幸的是，我遇到了一些问题：

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

尝试此操作可将尺寸强制为您想要的尺寸$('#myModal').modal({'show':false).height('600px').width('500px');

Answer 4

试试这个

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

Answer 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/

Answer 6

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

尝试将这样的内容添加到css

你的javascript

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

Answer 7

查看fiddle及其result。

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

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

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

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

Answer 8