如何在 jQuery UI 对话框中禁用滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1619750/
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
How can you disable scroll bars in the jQuery UI dialog box?
提问by ngreenwood6
Does anyone know if there is a way to disable scroll bars in the jquery dialog box? The content that I have in the div is 300 px but the dialog is set to 200px. It automatically puts the scrollbars but I do not want them. I will add it myself to the second div that makes it bigger than the window. Any help is appreciated.
有谁知道是否有办法在 jquery 对话框中禁用滚动条？我在 div 中的内容是 300 像素，但对话框设置为 200 像素。它会自动放置滚动条，但我不想要它们。我会将它自己添加到第二个 div 中，使其比窗口大。任何帮助表示赞赏。
采纳答案by Paul D. Waite
Do you mean the jQuery UI dialog widget?
你是说jQuery UI 对话框小部件吗？
You can pass an option when you create it to specify its height, e.g.
您可以在创建它时传递一个选项来指定其高度，例如
$('.selector').dialog({ height: 350 });
Make it taller than the content you're putting into it, and I suspect you'd be golden.
让它比你投入的内容高，我怀疑你会是金子。
回答by MUG4N
I solved the problem like this:
我解决了这样的问题：
.dialog({
title: $(this).attr("data-dialog-title"),
closeOnEscape: true,
close: function () { $(this).remove() },
draggable: true,
position: 'center',
width: 500,
height: 'auto',
modal: true,
open: function (event, ui) {
$('#myDialogId').css('overflow', 'hidden'); //this line does the actual hiding
}
});
回答by Paul D. Waite
I don't know exactly what you mean by a 'jquery dialog box', but the standard way to disable the scroll bars would be to set the div's overflow property to 'hidden'
我不知道你所说的“jquery 对话框”到底是什么意思，但禁用滚动条的标准方法是将 div 的溢出属性设置为“隐藏”
put this in your css file:
把它放在你的css文件中：
div.class_name {
overflow: hidden;
}
回答by DoctorEJB
The overflow:hidden worked for me. When only setting the height/width params the scroll bars would still appear depending on text size and zoom.
溢出：隐藏为我工作。当仅设置高度/宽度参数时，滚动条仍会根据文本大小和缩放显示。
回答by Sanjeev
Solution with no css or fixed Height:
没有 css 或固定高度的解决方案：
I think the best solution to above problem is to make dialog height dynamic, the height should adjust automatically as per content, when content increases modal height should increase. To do this use the height "auto" option provided by Jquery UI modal , it adjusts modal height as per content so need of add 'overflow:hidden' or 'height:350'
我认为上述问题的最佳解决方案是使对话框高度动态化，高度应根据内容自动调整，当内容增加时模态高度应增加。为此，请使用 Jquery UI modal 提供的高度“自动”选项，它会根据内容调整模态高度，因此需要添加 'overflow:hidden' 或 'height:350'
$( "#dialog" ).dialog({
modal : true,
height:"auto"
});
回答by smac2020
This removed the scroll bars:
这删除了滚动条：
$( "#dialog" ).dialog({
autoOpen: false,
resizable: false,
dialogClass: 'info',
height: 'auto',
width: 'auto',
show: { effect: "blind", duration: 1000 },
hide: {effect: "explode", duration: 1000 },
draggable: true,
open: function (event, ui) {
$(this).dialog('open');
},
close: function (event, ui) {
cleanup() ;
}
});
回答by Rahul Varadkar
In the example below I also added 'resizable = false' for the dialog. So that any overflow text cannot be seen by resizing the dialog.
在下面的示例中，我还为对话框添加了“resizable = false”。这样通过调整对话框大小就无法看到任何溢出文本。
$("a#registerServerStudio , a#regServer").click(function(e) {
//alert("login using POST is Clicked");
e.preventDefault();
registerSuccess = false;
regSSDlg = $("#regSS").dialog({
autoOpen: false,
height: 280,
width: 420,
modal: true,
resizable: false,
buttons: {
},
close: function() {
registerSuccess = false;
},
show:{effect:'bounce', duration: 100},
});
$('#regSS').css('overflow', 'hidden');
regSSDlg.prev(".ui-dialog-titlebar").css({"background":"#47669E", "color":"white", "font-size":"13px", "font-weight":"normal"}) ;
regSSDlg.dialog("open");
});
