asp.net-mvc如何使弹出窗口页脚 unscrollable

发布时间: 2016/10/6 4:36:27
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我在我的项目中有剑道窗口和我填充中它的某些字段。尽管标题作为我想要滚动条溢出到页脚。我想是可以滚动除了从页眉和页脚下面的图像 (页脚为粘性可见) 所示的窗口中的内容。怎么可以这样?enter image description here

视图︰

@(Html.Kendo().Window()
    .Name("winCreate")
    .Title("New")
    .Visible(false)
    .Draggable(true)
    .Content("Loading...")
    .LoadContentFrom("Create", "Issue")
    .Modal(true) 
    .Actions(actions => actions
        .Close()
     )      
)



@using (Html.BeginForm("Create", "Issue", FormMethod.Post}))
{
    @Html.AntiForgeryToken()

<div class="container">

    @Html.LabelFor(m => m.ProjectID)
    @Html.TextBoxFor(m => m.ProjectID, new { maxlength = 75, @class = "k-textbox" })
    <br />

    ... //The other staff here

    <div class="modal-footer">
        @(Html.Kendo().Button()
        .Name("btnCancel")
        .HtmlAttributes(new { type = "button", @class = "k-button" })
        .Content("Cancel")
        .Events(ev => ev.Click("closeWindow"))
        )

        @(Html.Kendo().Button()
        .Name("btnSubmit")
        .HtmlAttributes(new { type = "submit", @class = "k-primary k-button"            })
        .Content("Save")
    )
    </div>

</div>
}

解决方法 1:

创建一个用于调整大小内容 div 中的函数︰

  function ResizeDialog(){
    var h = $("#dialog").height();
    var headH = $("#dialog .modal-header").outerHeight(true);
    var footH = $("#dialog .modal-footer").outerHeight(true);
    var contH = h - headH - footH ;

    $("#dialog .container").height(contH).css("overflow", "auto");    
  }

然后在窗口中调用此函数打开并调整大小︰

$("#dialog").kendoWindow({
  title: "New",
  draggable: true,
  modal: true,
  height: "80%",
  resize: function() {
    ResizeDialog();
  },
  open: function() {
    ResizeDialog();
  }
});

工作演示

请注意,演示不使用 MVC,但基本方法应该是相同......

官方微信
官方QQ群
31647020