我在 jquery 中使用 simplemodal 弹出窗口，我想根据我的内容动态设置弹出窗口的高度。目前，它固定在 500。如果我删除了 height 属性，那么它第一次工作，但如果内容增长，那么高度不会自行调整（我的弹出窗口中有标签，每个标签加载不同的内容） .
$("#popup").modal({
containerCss: {
width: 550,
height: 500
},
【问题讨论】：
标签： jquery jquery-plugins simplemodal
我可以通过将此函数添加到 onShow 的最后一行来获得动态高度（仅在 chrome 和 ff 上测试）：
$('#simplemodal-container').css('height', 'auto');
希望这会有所帮助。如果您指定 containerId，则应将 '#simplemodal-container' 替换为您的 containerId。
【讨论】：
这里的一些解决方案的困难，即设置高度自动，是你失去了 simplemodal 保持模式小于当前窗口大小的良好行为（例如，通过将 maxHeight 设置为 90%）。
我想出了以下解决方案：
$.modal.defaults.onShow = function(dialog) {
if (!dialog) dialog = $.modal.impl.d
dialog.container.css('height', 'auto');
dialog.origHeight = 0;
$.modal.setContainerDimensions();
$.modal.setPosition();
}
其本质是，一旦您在活动模式上运行 setContainerDimensions，如果您拉入新内容，即使显式调用 setContainerDimensions，它也不会重新计算它们。我在这里所做的是绕过记住的高度并强制重新计算。
您当然必须在每次更改内容（ajax 调用、选项卡更改等）时调用 $.modal.defaults.onShow，但您可以保留 autoResize 和 autoPosition 功能，同时避免不必要的滚动条。
【讨论】：
我结合了 Sahat 和 Tommy 的答案来得到这个更短的版本。我在 Firefox 中对其进行了测试，并且可以正常工作：
$.modal("<p>yourContent</p>", { onShow: function(dlg) {
$(dlg.container).css('height','auto')
}});
【讨论】：
把这个放到你的css文件中：
.simplemodal-container
{
height:auto !important;
}
【讨论】：
$("#DialogContainer" ).dialog({ title: thisTitle, modal: true, show: 'fade', buttons: { 'Done': function() { $( this ).dialog( "close" ); } }
SimpleModal 没有在内容更改时调整高度/宽度的内置功能。这是您必须添加的内容。
【讨论】：
这是我的解决方案：
var activeModal;
$.extend($.modal.defaults, {
onShow: function(dialog) {
activeModal = dialog;
dialog.container.css('height', 'auto');
}
});
function showModal() { // Creates a modal
$.modal("#aModal");
}
...
function changeModalContent() { // A function that changes the modal content
...
// After changing the content, do this:
$.modal.update(activeModal.data.css('height'), 'auto');
}
我在 FF、Chrome、Safari 和 Opera 上测试过。
希望它也对你有用...
问候！
【讨论】：
保留高度默认为自动高度。如果您销毁对话框然后立即重新创建它，则自动高度应该基本上为您调整它的大小。这是一种解决方法，但可能比尝试手动计算适当的高度更容易。在对话框中有一个自动调整大小选项会更好，但是......
【讨论】：
我能够通过记住传递给 onShow 事件处理程序的对话框参数来实现这一点，然后当稍后的某些事件导致内容更改时，操作 dialog.container 的 css 高度属性：
【讨论】：
var h = $(your_content_element).css('height');
$("#popup").modal({
containerCss: {
width: 550,
height: h
},
那你得想办法，当你触发modal时，脚本再计算高度。
【讨论】：
这是我的工作：
$.extend($.modal.defaults, {
closeClass: "close",
closeHTML: "<a></a>",
minWidth: 400,
minHeight: 200,
maxWidth: 780,
maxHeight: 580,
onShow: function (dialog) {
dialog.container.css("height", "auto");
}
});
【讨论】：
根据 dmnc 的回答，我可以通过将代码添加到 onOpen 函数中，在容器 fadeIn 的回调中来实现这一点。
在内容呈现时会有一点位置跳跃，但它现在非常适合我调整大小和重新定位。
$('#target').modal({
overlayClose: true,
onOpen: function (dialog) {
dialog.overlay.fadeIn('fast', function(){
dialog.data.hide();
dialog.container.fadeIn('fast', function(){
dialog.data.fadeIn('fast');
// where the magic happens
dialog.container.css('height', 'auto');
dialog.origHeight = 0;
$.modal.setContainerDimensions();
$.modal.setPosition();
});
});
},
onClose: function (dialog) { ... }
});
【讨论】：
这是一种动态调整 Eric Martins Simple Modal 的高度和/或宽度的简单方法。我只是在单击“.something”后调用打开一个模式。我测量窗口高度/宽度并减去（px 或 div（高度））。然后我用动态创建的变量设置宽度/高度
$('.something ').click(function() {
//Dynamically Get Height/Width of the Window
var wh = $(window).height() - 100
var ww = $(window).width() - 100
//Can subtract other divs heights if wanted
//var dh = $('#exampleDiv').height();
//dh = ( wh - dh );
$('#modalThis').modal({
containerCss : {
height : wh,
//or height : dh
width : ww
},
});
});
【讨论】：
.modal({
autoResize:true,
maxHeight: $(window).height(),
minHeight: $(window).height() - 100
});
【讨论】：
在 jquery.simplemodal.js 中，覆盖
containerCss:{}
这个：
containerCss:{width: 650}
更改css图像顶部和底部的gif文件。
Arman de Guzman de Castro :-)
【讨论】：