【问题标题】:How to make kendo popup editor AUTO-CLOSE when click outside of the popup window?在弹出窗口外单击时如何使剑道弹出编辑器自动关闭?
【发布时间】:2016-12-26 03:25:59
【问题描述】:

我是这样使用剑道ui弹窗编辑器的:

    editable: {
        mode: "popup",
        window: {
            actions: [],
            title: false,
            modal: false,
            resizable: false,
            animation: false,
            clickOutside: true
        }

不知道能否通过可编辑的配置让弹窗自动关闭。

我曾尝试添加autoHide:true、autoClose: true 配置,但不起作用。

【问题讨论】:

    标签: javascript kendo-ui kendo-grid


    【解决方案1】:

    我知道这是一个老问题,但也许有人可以从中受益:

    $("#btnSave").kendoButton({
        click: function (e) {
            e.preventDefault();
            var dialog = $("#dialog").data("kendoWindow");
            dialog.center();
            dialog.open();
        }
    });
    
    $("#dialog").kendoWindow({
        width: 225,
        height: 70,
        modal: true,
        visible: false,
        title: false,
        actions: [],
        open: function() {
            setTimeout(function () {
                $("#dialog").data("kendoWindow").close();
            }, 2000);
        },
        animation: {
            open: { effects: "fade:in"},
            close: { effects: "fade:out"}
        }
    });
    

    【讨论】:

      【解决方案2】:

      以防万一有人觉得懒惰,以下是关闭弹出编辑窗口的方法:

      $(document).on('click', function (e) {
          //kendo popup edit window selector
          var windowCont = $('.k-popup-edit-form.k-window-content');
      
          //if it was first click on kendo grid edit button exit function
          //otherwise popup window will be closed immidiatelly 
          if ($('.k-grid-edit').is(e.target))
              return;
      
          //if click was outside popup window, trigger close button
          if (!windowCont.is(e.target) && windowCont.has(e.target).length === 0)
              windowCont.find('.k-grid-cancel').click();
      })
      

      【讨论】:

        猜你喜欢
        • 2023-02-09
        • 2012-12-21
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-11-21
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多