Kendo 对话一个标签

Question

我正在尝试使用 PDF 文件将 kendoDialog 连接到 a tag。对话框将打开，然后用户单击确定，然后 PDF 文件将打开。

<a id="dialog" href="http://www.africau.edu/images/default/sample.pdf">
    ShowPopup before opeing PDF
 </a>

示例道场

https://dojo.telerik.com/@mcdevittnccn/IjonasUp

Answer 1

在 Telerik DOJO 中看到了您的示例，试试这个...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
  


     <a href="http://www.africau.edu/images/default/sample.pdf">
    ShowPopup before opeing PDF </a>
    
    <div id="dialog"></div>

    <script>
        $(document).ready(function () {
            var dialog;

            $("a").on('click', function(e) {
                if (dialog) {
                    dialog.open();
                } else {
                    dialog = $('#dialog').kendoDialog({
                        width: "450px",
                        title: "Software Update",
                        closable: false,
                        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: 'Skip this version' },
                            { text: 'Remind me later' },
                            { text: 'Install update', primary: true }
                        ],
                    }).data('kendoDialog');
                }

                e.preventDefault(); // remove this to proceed to pdf file
            });
        });
     </script>
</body>
</html>

这会显示当您单击 link 时出现的对话框。如果您希望继续下载，请删除 preventDefault。处理 actions.action 中的对话框点击。有关详细信息，请参阅 Kendo 对话框 API 参考。这应该让你继续。

Kendo 对话一个标签

Kendo dialog a tag

kendo-ui