jQuery UI模式（弹出框）控件大小，默认情况下隐藏

Question

jsFiddle这个问题

我目前正在使用引导程序模态，这是一个用于创建弹出框的jQuery插件。 （如果有人想查看非常简短的文档，请点击此处的链接 -它非常短，因此只需一分钟）。

不幸的是，我遇到了两个问题：

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

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

2. 我需要能够默认隐藏模式。 当前，页面加载后立即显示。 我尝试了以下操作，但似乎无法正确隐藏：

   $(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

看一下小提琴及其结果 。

.modal-body类的最大高度为400px。 如果您希望静态高度为900px，则应设置.modal-body的高度和最大高度。 否则，关闭按钮及其栏可能会漂浮在盒子上。

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

由于框模型的边距和内边距，因此#myModal为900px高时为775px。 总是短125px。 如果要使其动态，可以编写如下内容：

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

Answer 8

1. 您做得对，但是如果引导CSS使用了max-width min-width并将其注释掉，请看一下。

2. 如果它在JS中不起作用，则可以通过将hide类放在模式包装中来实现。