Question

我正在使用Kendo UI的窗口组件，它类似于任何模态对话框。

我有一个关闭按钮，如何在点击该按钮时关闭窗口（而不是单击标题栏中的默认“x”按钮）

我的窗口中的内容是从另一个视图加载的

@(Html.Kendo().Window()
           .Name("window")
           .Title("Role")
           .Content("loading...")
           .LoadContentFrom("Create", "RolesPermissions", Model.Role)
           .Modal(true)
           .Width(550)           
           .Height(300)           
           .Draggable()
           .Visible(false)
          )

在同一视图中，我有

<span id="close" class="btn btn-inverse">Cancel</span>

这是我在主视图（调用窗口的视图）中的内容

$(document).ready(function () {
    var window = $("#window").data("kendoWindow");

    $("#open").click(function (e) {
        window.center();
        window.open();
    });

    $("#close").click(function(e) {
        window.close();
    });
});

Answer 1

基本上您已经知道如何关闭窗口 - 您需要使用其API的关闭方法。

$("#window").data("kendoWindow").close();

但是为了将处理程序附加到视图内的按钮，您需要等到内容加载 - 您需要使用refresh事件。

e.g。

$('#theWindowId').data().kendoWindow.bind('refresh',function(e){
    var win = this;
    $('#close').click(function(){
         win.close();
    })
})

Answer 2

在JavaScript中 - HTML window是一个表示浏览器中打开窗口的对象。尝试将window定义为其他内容。

$(document).ready(function () {
    var wnd = $("#window").data("kendoWindow");

    $("#open").click(function (e) {
        wnd.center();
        wnd.open();
    });

    $("#close").click(function(e) {
        wnd.close();
    });
});

Answer 3

在剑道ui中有一个事件，它应该是这样的

 $("#idofyourbutton").click(function () {
     $("#window").data("kendoWindow").close();
    });

Answer 4

如果使用ajax加载的内容，Petur Subev的答案是完美的！我想举一个使用模板的例子，这更简单（而不是所有的请求都是由ajax）。考虑以下模板：

Index3f

现在，让我们加载模板e调用窗口关闭方法：

<script id="Template_Example1" type="text/kendo-tmpl">
<div class="i-contentWindow">
    <div>
        <a id="btn1" href="\#"><span class="k-icon k-i-cancel"></span>Button 1</a>
    </div>
</div>

在窗口中关闭一个带有自定义关闭按钮的kendoui窗口

4 个答案: