jquery simplemodal 动态高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1407059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery simplemodal dynamic height
提问by
I'm using the simplemodal popup in jquery, and I would like to set the height of my popup dynamically depending on my content. Currently, it is fixed at 500. If I remove the height property, then it works the first time, but if the content grows, then the height doesn't adjust itself (I have tabs within my popup and each tab loads different content).
我在 jquery 中使用 simplemodal 弹出窗口，我想根据我的内容动态设置弹出窗口的高度。目前，它固定为 500。如果我删除 height 属性，那么它第一次工作，但如果内容增长，那么高度不会自行调整（我的弹出窗口中有标签，每个标签加载不同的内容） .
$("#popup").modal({
containerCss: {
width: 550,
height: 500
},
回答by Sahat Tambunan
I can have dynamic height (only tested on chrome and ff) by adding this function to last line of onShow:
我可以通过将此函数添加到 onShow 的最后一行来获得动态高度（仅在 chrome 和 ff 上测试）：
$('#simplemodal-container').css('height', 'auto');
hope this could help. If you specify a containerId, you should replace the '#simplemodal-container'with your containerId.
希望这会有所帮助。如果您指定了containerId，则应将“#simplemodal-container”替换为您的 containerId。
回答by dmnc
The difficulty with some of the solutions here, i.e. setting height auto, is that you lose simplemodal's nice behaviour to keep the modal smaller than the current window size (by setting maxHeight to 90%, for example).
这里的一些解决方案的困难，即设置高度自动，是你失去了 simplemodal 保持模态小于当前窗口大小的良好行为（例如，通过将 maxHeight 设置为 90%）。
I have come up with the following solution:
我想出了以下解决方案：
$.modal.defaults.onShow = function(dialog) {
if (!dialog) dialog = $.modal.impl.d
dialog.container.css('height', 'auto');
dialog.origHeight = 0;
$.modal.setContainerDimensions();
$.modal.setPosition();
}
The essence of this is that once you run setContainerDimensions on an active modal it will not recalculate them if you pull in new content, even with an explicit call to setContainerDimensions. What I do here is get round the remembered height and force the recalculate.
其本质是，一旦您在活动模式上运行 setContainerDimensions，即使您显式调用 setContainerDimensions，它也不会在您拉入新内容时重新计算它们。我在这里做的是绕过记住的高度并强制重新计算。
You will of course have to call $.modal.defaults.onShow each time you change the content (ajax call, tab change etc) but you can keep the autoResize and autoPosition capabilities whilst avoiding unnecessary scrollbars.
每次更改内容（ajax 调用、选项卡更改等）时，您当然都必须调用 $.modal.defaults.onShow 但您可以保留 autoResize 和 autoPosition 功能，同时避免不必要的滚动条。
回答by HRJ
I combined Sahat's and Tommy's answer to get this shorter version. I tested it in Firefox and it works:
我结合了 Sahat 和 Tommy 的回答来获得这个较短的版本。我在 Firefox 中对其进行了测试，并且可以正常工作：
$.modal("<p>yourContent</p>", { onShow: function(dlg) {
$(dlg.container).css('height','auto')
}});
回答by rtcardoso
Put this in your css file:
把它放在你的 css 文件中：
.simplemodal-container
{
height:auto !important;
}
回答by Eric Martin
SimpleModal does not have a built in feature that adjusts height/width when the content changes. This is something you'd have to add.
SimpleModal 没有内置功能，可以在内容更改时调整高度/宽度。这是您必须添加的内容。
回答by arturocr
here is my solution:
这是我的解决方案：
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');
}
I tested it on FF, Chrome, Safari and Opera.
我在 FF、Chrome、Safari 和 Opera 上对其进行了测试。
Hope it works for you too...
希望它也适用于你......
Regards!
问候！
回答by Hector Scout
Leaving the height out defaults it to auto height. If you destroy the dialog and then immediately recreate it the auto height should essentially resize it for you. It a hack work around but probably easier than trying to calculate the appropriate height manually. It would be nicer to have an autoresize option in dialog but...
离开高度默认为自动高度。如果您销毁对话框然后立即重新创建它，自动高度应该基本上为您调整它的大小。这是一个黑客工作，但可能比尝试手动计算适当的高度更容易。在对话框中有一个自动调整选项会更好，但是......
回答by Tommy Knowlton
I was able to accomplish this by memoizing the dialog parameter that is passed in to the onShow event handler, then when some later event causes content to change, manipulate the dialog.container's css height property:
我能够通过记住传递给 onShow 事件处理程序的 dialog 参数来完成此操作，然后当某些稍后的事件导致内容更改时，操作 dialog.container 的 css height 属性：
<script type="text/javascript">
var walkInDlg;
function doModal() { // called from onClick of some button on the page
jQuery.modal("#aModal", { height:"auto",
width:500,
backgroundColor:"#807c68",
overlay:75,
onShow: function(dlg) { walkInDlg = dlg },
onClose: function(dlg) { walkInDlg = undefined; jQuery.modal.close() },
containerCss:{border:"0",padding:"0"}
})
}
</script>
...
...
// somewhere else in the page
// this is in the event handler for an action that
// adds content to the dialog
...
// after adding the content, do this:
jQuery(walkInDlg.container).css('height', 'auto')
witnessed this technique working in Chrome and Firefox.
目睹了这项技术在 Chrome 和 Firefox 中的应用。
回答by Manic
Here is what I do:
这是我所做的：
$.extend($.modal.defaults, {
closeClass: "close",
closeHTML: "<a></a>",
minWidth: 400,
minHeight: 200,
maxWidth: 780,
maxHeight: 580,
onShow: function (dialog) {
dialog.container.css("height", "auto");
}
});
回答by yoda
var h = $(your_content_element).css('height');
$("#popup").modal({
containerCss: {
width: 550,
height: h
},
Then you have to find a way that when you trigger the modal, the script calculate the height again.
然后你必须找到一种方法，当你触发模态时，脚本再次计算高度。
