Tengo una ventana modal de kendo, en la que tengo un formulario, así que antes de cerrar quiero alertar al usuario que puede haber cambios que no ha guardado. el problema es que la ventana modal de kendo parece tener solo un evento de cierre, por lo que si evito el evento de cierre predeterminado, entonces es difícil de cerrar, y si trato de agregar el botón 'X' personalizado, entonces no parece estar sentado en el esquina superior derecha. cualquier ayuda/dirección es apreciada. Gracias
Prueba esto:
function onClose(e) { if (e.userTriggered) { e.preventDefault(); if (window.confirm('Are you sure?')) { dialog.data("kendoDialog").close(); } } }Manifestación:
<!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>