在关闭Kendo模态窗口之前，如何获得确认？

发布于 2025-02-04 15:59:43 字数 158 浏览 4 评论 0原文

我有一个kendo模态窗口，其中有一个表格，因此在关闭之前，我想提醒用户可能会有更改您尚未保存的更改。问题是，Kendo Modal窗口似乎只有关闭事件，因此，如果我在关闭事件上进行预防默认面件，那么很难关闭，如果我尝试添加自定义“ x”按钮，那么它似乎不会坐在右上角。任何帮助/方向都将不胜感激。谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱格式化 2025-02-11 15:59:43

尝试以下操作：

function onClose(e) {
    if (e.userTriggered) {
        e.preventDefault();

        if (window.confirm('Are you sure?')) {
            dialog.data("kendoDialog").close();
        }
    }
}

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://demos.telerik.com/kendo-ui/dialog/events">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default-ocean-blue.min.css" />

    <script src="https://kendo.cdn.telerik.com/2022.2.510/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
    
    

    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>
    <div id="example">
    <span id="show" style="display:none" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md hidden-on-narrow">Click here to open the dialog.</span>
    <div id="dialog"></div>

    <div class="responsive-message"></div>

    <script>
        var dialog = $("#dialog");
        var show = $("#show");

        dialog.kendoDialog({
            width: "400px",
            title: "Software Update",
            closable: true,
            modal: false,
            content: "<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>",
            actions: [
                { text: 'Close', action: onClose },
                { text: 'OK', primary: true }
            ],
            close: onClose
        });
        function onClose(e) {
          if (e.userTriggered) {
              e.preventDefault();

            if (window.confirm('Are you sure?')) {
              dialog.data("kendoDialog").close();
            }
          }
            show.fadeIn();
        }

        show.click(function () {
            dialog.data("kendoDialog").open();
            show.fadeOut();
        });
    </script>

    <style>
        #example {
            min-height: 370px;
        }

            #example .box {
                margin: 0;
            }

        #show {
            text-align: center;
            position: absolute;
            white-space: nowrap;
            padding: 1em;
            cursor: pointer;
            margin-top: 30px;
        }
    </style>
</div>

        <div class="kd-example-console">
            <div class="header">
                <span class="title">CONSOLE LOG</span>
                <span class="clear kd-text-secondary">Clear log</span>
            </div>
            <div class="console"></div>
        </div>

</body>
</html>

dojo

Try this:

function onClose(e) {
    if (e.userTriggered) {
        e.preventDefault();

        if (window.confirm('Are you sure?')) {
            dialog.data("kendoDialog").close();
        }
    }
}

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://demos.telerik.com/kendo-ui/dialog/events">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default-ocean-blue.min.css" />

    <script src="https://kendo.cdn.telerik.com/2022.2.510/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
    
    

    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>
    <div id="example">
    <span id="show" style="display:none" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md hidden-on-narrow">Click here to open the dialog.</span>
    <div id="dialog"></div>

    <div class="responsive-message"></div>

    <script>
        var dialog = $("#dialog");
        var show = $("#show");

        dialog.kendoDialog({
            width: "400px",
            title: "Software Update",
            closable: true,
            modal: false,
            content: "<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>",
            actions: [
                { text: 'Close', action: onClose },
                { text: 'OK', primary: true }
            ],
            close: onClose
        });
        function onClose(e) {
          if (e.userTriggered) {
              e.preventDefault();

            if (window.confirm('Are you sure?')) {
              dialog.data("kendoDialog").close();
            }
          }
            show.fadeIn();
        }

        show.click(function () {
            dialog.data("kendoDialog").open();
            show.fadeOut();
        });
    </script>

    <style>
        #example {
            min-height: 370px;
        }

            #example .box {
                margin: 0;
            }

        #show {
            text-align: center;
            position: absolute;
            white-space: nowrap;
            padding: 1em;
            cursor: pointer;
            margin-top: 30px;
        }
    </style>
</div>

        <div class="kd-example-console">
            <div class="header">
                <span class="title">CONSOLE LOG</span>
                <span class="clear kd-text-secondary">Clear log</span>
            </div>
            <div class="console"></div>
        </div>

</body>
</html>

Dojo

回复收藏 0 原文

~没有更多了~