Question

我想在此页面中复制“DEMO 3”：

http://www.mudaimemo.com/p/simpledialog/

除了我动态填写复选框列表之外它很有效，有时我的页面上有更多的复选框。无论如何要使这个可滚动，所以有一个最大尺寸，因为它只是离开屏幕。

编辑：当我尝试为javascript添加高度时，框出现正确的高度，但复选框继续向下移动页面。如何将复选框保留在容器中并有一个垂直滚动条？

$(document).ready(function() {
    $('#sdHc3').simpleDialog({
    showCloseLabel: false,
        height: 400,
        open: function() {
            $('#checkboxStatus').html('');
        },
        close: function() {
            var c = [];
            $('#checkboxForm :checkbox:checked').each(function() {
                c.push($(this).val());
            });
            $('#checkboxStatus').html('&nbsp;&nbsp;Checked <b>' + c.join(', ') + '</b>.').show();
        }
    });

Answer 1

溢出：滚动;

在容器div的css中，请确保设置高度。麻烦的是，并非所有浏览器都支持max-height，因此你的div总是相同的大小（ofc，除非你每次需要这个功能时指定不同的高度）

在你的css文件中（在这种情况下在css文件中执行：如果你没有重命名下载的文件，请使用jquery.simpledialog.0.1.css）：

.sd_container{
 font-family: arial,helvetica,sans-serif;
 margin:0;
 padding: 10px;
 position: absolute;
 background-color: #fff;
 border: solid 1px #ccc;
 text-align:center;
 **overflow: scroll;**
}

（没有明星ofc）

Answer 2

CSS：

#scrollableDiv
{
    overflow: auto;
    height: 549px;/* IE is dumb */
    max-height: 549px;/* Or the amount of pixels you want */
}

jquery中的可滚动对话框

2 个答案: