Replace jQuery UI dialogs with <dialog> (#3401)

web/css/src/dependencies/jquery-ui.css

@@ -1,98 +1,7 @@
 /*
- * Some parts of jQuery UI v1.13.2
+ * "Tabs" CSS from jQuery UI v1.13.2
  */
 
-/* Dialog */
-.ui-dialog {
-	position: absolute;
-	top: 0;
-	left: 0;
-	padding: 0.2em;
-	outline: 0;
-}
-.ui-dialog .ui-dialog-titlebar {
-	padding: 0.4em 1em;
-	position: relative;
-}
-.ui-dialog .ui-dialog-title {
-	float: left;
-	margin: 0.1em 0;
-	white-space: nowrap;
-	width: 90%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-.ui-dialog .ui-dialog-titlebar-close {
-	position: absolute;
-	right: 0.3em;
-	top: 50%;
-	width: 20px;
-	margin: -10px 0 0 0;
-	padding: 1px;
-	height: 20px;
-}
-.ui-dialog .ui-dialog-content {
-	position: relative;
-	border: 0;
-	padding: 0.5em 1em;
-	background: none;
-	overflow: auto;
-}
-.ui-dialog .ui-dialog-buttonpane {
-	text-align: left;
-	border-width: 1px 0 0 0;
-	background-image: none;
-	margin-top: 0.5em;
-	padding: 0.3em 1em 0.5em 0.4em;
-}
-.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
-	float: right;
-}
-.ui-dialog .ui-dialog-buttonpane button {
-	margin: 0.5em 0.4em 0.5em 0;
-	cursor: pointer;
-}
-.ui-dialog .ui-resizable-n {
-	height: 2px;
-	top: 0;
-}
-.ui-dialog .ui-resizable-e {
-	width: 2px;
-	right: 0;
-}
-.ui-dialog .ui-resizable-s {
-	height: 2px;
-	bottom: 0;
-}
-.ui-dialog .ui-resizable-w {
-	width: 2px;
-	left: 0;
-}
-.ui-dialog .ui-resizable-se,
-.ui-dialog .ui-resizable-sw,
-.ui-dialog .ui-resizable-ne,
-.ui-dialog .ui-resizable-nw {
-	width: 7px;
-	height: 7px;
-}
-.ui-dialog .ui-resizable-se {
-	right: 0;
-	bottom: 0;
-}
-.ui-dialog .ui-resizable-sw {
-	left: 0;
-	bottom: 0;
-}
-.ui-dialog .ui-resizable-ne {
-	right: 0;
-	top: 0;
-}
-.ui-dialog .ui-resizable-nw {
-	left: 0;
-	top: 0;
-}
-
-/* Tabs */
 .ui-tabs {
 	position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
 	padding: 0.2em;
@@ -145,12 +54,3 @@
 .ui-helper-clearfix:after {
 	clear: both;
 }
-
-/* Overlays */
-.ui-widget-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}

web/css/src/themes/dark.css

@@ -566,7 +566,7 @@ strong {
 	text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
 	font-weight: 400;
 	border-color: #707070;
-	background: rgb(48 48 48);
+	background: #303030;
 	background: linear-gradient(
 		0deg,
 		rgb(48 48 48 / 100%) 0%,
@@ -591,8 +591,22 @@ strong {
 			inset 0 0 3px rgb(0 0 0 / 65%);
 	}
 
-	&:active,
 	&:focus {
+		color: #eee;
+		text-shadow: 0 1px 1px rgb(0 0 0 / 35%);
+		border-color: #0090ff;
+		background: #303030;
+		background: linear-gradient(
+			0deg,
+			rgb(48 48 48 / 100%) 0%,
+			rgb(53 53 53 / 100%) 35%,
+			rgb(69 69 69 / 100%) 100%
+		);
+		box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 1px rgb(20 20 20 / 100%),
+			inset 0 0 3px rgb(0 0 0 / 50%);
+	}
+
+	&:active {
 		color: #d4d4d4;
 		text-shadow: 0 -1px 1px rgb(0 0 0 / 55%);
 		border-color: #0066b4;
@@ -760,31 +774,22 @@ strong {
 /* Modals
    ========================================================================== */
 
-.ui-dialog .ui-dialog-buttonpane {
-	border-top: 1px solid #404040;
-}
-
-.ui-dialog .ui-dialog-buttonpane button {
-	box-shadow: 0 1px 4px rgb(0 0 0 / 10%), inset 0 0 1px #000, inset 0 0 3px rgb(0 0 0 / 50%);
-}
-
-.ui-dialog {
+.modal {
 	background-color: rgb(45 45 45 / 95%);
-	border: 1px solid rgb(80 80 80 / 97%);
+	border-color: rgb(80 80 80 / 97%);
 	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 25px rgb(0 0 0 / 90%);
-}
 
-.ui-dialog .ui-dialog-content {
-	color: #dadada;
+	& p {
+		color: #dadada;
+	}
 }
 
-.ui-dialog .ui-dialog-title {
+.modal-title {
 	color: #f12569;
-	font-weight: 600;
 }
 
-.ui-widget-header a {
-	color: #cacaca;
+.modal-options {
+	border-top: 1px solid #404040;
 }
 
 /* Shortcuts panel

web/css/src/themes/default.css

@@ -1719,60 +1719,38 @@
 /* Modals
    ========================================================================== */
 
-.dialog {
-	display: none;
-}
-
-/* Hide the default close button in dialog header */
-.ui-dialog-titlebar-close {
-	display: none;
-}
-
-/* Set dialog z-index */
-.ui-front {
-	z-index: 2;
-}
-
-.ui-dialog {
-	font-family: Exo, system-ui;
-	font-weight: 500;
-	background-color: rgb(255 255 255 / 90%);
+.modal {
+	text-transform: none;
+	border-radius: var(--border-radius-base);
 	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
-	border-radius: 6px;
+	background-color: rgb(255 255 255 / 90%);
 	border: 1px solid rgb(255 255 255 / 98%);
-	text-align: center;
-}
+	min-width: 360px;
+	max-width: 550px;
 
-.ui-dialog .ui-dialog-content {
-	color: #535353;
-	padding: 20px 26px 30px;
+	& p {
+		color: #535353;
+		text-align: center;
+		padding: 10px 20px 30px;
+	}
 }
 
-.ui-dialog .ui-dialog-title {
-	margin: 0;
+.modal-title {
 	color: #305ba9;
 	font-size: 1rem;
-	text-transform: none;
-	letter-spacing: -0.01em;
 	text-align: center;
-	float: none;
-	font-weight: 500;
-}
-
-.ui-widget-overlay {
-	background-color: rgb(0 0 0 / 60%);
+	padding: 15px;
 }
 
-.ui-dialog .ui-dialog-buttonpane {
-	border-color: #fff;
+.modal-options {
 	box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
-	margin-top: 0;
-	padding: 0;
-}
+	display: flex;
+	justify-content: flex-end;
+	padding: 10px;
 
-.ui-dialog .ui-dialog-buttonpane button {
-	margin: 0.5em 0.5em 0.5em 0;
-	box-shadow: 0 1px 4px rgb(0 0 0 / 20%), inset 0 0 1px #fff, inset 0 0 3px rgb(255 255 255 / 50%);
+	& button {
+		margin-left: 6px;
+	}
 }
 
 /* Shortcuts panel

web/css/src/themes/flat.css

@@ -156,12 +156,8 @@ strong {
 /* Modals
    ========================================================================== */
 
-.ui-dialog {
+.modal {
 	box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
-
-	& .ui-dialog-buttonpane button:nth-of-type(2) {
-		box-shadow: none;
-	}
 }
 
 /* Login

web/css/src/themes/vestia.css

@@ -316,28 +316,18 @@ strong {
 /* Modals
    ========================================================================== */
 
-.ui-dialog {
+.modal {
 	box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
 
-	& .ui-dialog-buttonpane button {
-		box-shadow: none;
+	& p {
+		color: #333;
 	}
 }
 
-.ui-widget,
-.ui-dialog,
-.ui-dialog .ui-dialog-title {
-	font-family: var(--font-family);
-}
-
-.ui-dialog .ui-dialog-title {
+.modal-title {
 	color: #111;
 }
 
-.ui-dialog .ui-dialog-content {
-	color: #333;
-}
-
 /* Forms
    ========================================================================== */
 

web/css/themes/flat.min.css

@@ -1 +1 @@
-:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-usage-inner{text-shadow:none}.top-bar-notifications-list{border:1px solid #ccc;box-shadow:none}.top-bar-menu-link{text-shadow:none}.top-bar-menu-link:active,.top-bar-menu-link:hover{background:#fff;box-shadow:none}.top-bar-menu-link.active{background:#fff}.toolbar-sorting-menu{background-color:#fff;border-color:#ccc;box-shadow:none}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:hover,.l-unit__stat-col--left a:visited{color:#5f7eb3}.badge,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.collapse-header{background:#fafafa;box-shadow:none}.button,.form-control,.form-select{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger :focus,.button-danger:active{background:#a91200;border-color:#f4301a;color:#fff}.ui-dialog{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.ui-dialog .ui-dialog-buttonpane button:nth-of-type(2){box-shadow:none}.body-login,.body-reset{background:#5f7eb3}@media (min-width:480px){.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}}
+:root{--alert-box-shadow:none;--alert-text-shadow:none}b,strong{font-weight:600}.top-bar{background:#5070a6;box-shadow:none}.top-bar-usage-inner{text-shadow:none}.top-bar-notifications-list{border:1px solid #ccc;box-shadow:none}.top-bar-menu-link{text-shadow:none}.top-bar-menu-link:active,.top-bar-menu-link:hover{background:#fff;box-shadow:none}.top-bar-menu-link.active{background:#fff}.toolbar-sorting-menu{background-color:#fff;border-color:#ccc;box-shadow:none}.table-header{background:#fafafa}.l-unit:hover,.table-header{box-shadow:none}.l-unit__stat-col--left a,.l-unit__stat-col--left a:hover,.l-unit__stat-col--left a:visited{color:#5f7eb3}.badge,.l-unit:hover,.units .l-unit:hover{box-shadow:none}.collapse-header{background:#fafafa;box-shadow:none}.button,.form-control,.form-select{box-shadow:none}.button{background:linear-gradient(180deg,#ebf3f9 0,#dfebf5)}.button:hover{background:linear-gradient(180deg,#f1f8fd 0,#e3f0fb);box-shadow:none;color:#6986b7}.button:active,.button:focus{background:linear-gradient(180deg,#d2e8fa 0,#c2e0f8);box-shadow:none}.button-secondary{background:linear-gradient(180deg,#fafafa 0,#f1f1f1);box-shadow:none}.button-danger:hover{background:#fcd3cf;border-color:#f27e71;color:#f4301a}.button-danger :focus,.button-danger:active{background:#a91200;border-color:#f4301a;color:#fff}.modal{box-shadow:0 2px 11px 0 rgba(0,0,0,.5)}.body-login,.body-reset{background:#5f7eb3}@media (min-width:480px){.login{background-color:hsla(0,0%,100%,.8);box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 2px #fff}}

web/js/events.js

@@ -194,45 +194,62 @@ const VE = {
 	helpers: {
 		/**
 		 * Create dialog box on the fly
-		 * @param elm Element which contains the dialog contents
-		 * @param dialog_title
-		 * @param confirmed_location_url URL that will be redirected to if user hit "OK"
-		 * @param custom_config Custom configuration parameters passed to dialog initialization (optional)
+		 * @param dialogElm The <dialog> element near the link which triggers the dialog
+		 * @param dialogTitle The title of the dialog
+		 * @param targetUrl URL that will be redirected to if user clicks "OK"
 		 */
-		createConfirmationDialog: (elm, dialog_title, confirmed_location_url, custom_config) => {
-			custom_config = custom_config ?? {};
-			const default_config = {
-				modal: true,
-				//autoOpen: true,
-				resizable: false,
-				width: 360,
-				title: dialog_title,
-				close: function () {
-					$(this).dialog('destroy');
-				},
-				buttons: {
-					OK: function () {
-						location.href = confirmed_location_url;
-					},
-					Cancel: function () {
-						$(this).dialog('close');
-					},
-				},
-				create: function () {
-					const buttons = $(this).dialog('widget').find('.ui-dialog-buttonpane button');
-					buttons.first().addClass('button submit');
-					buttons.last().addClass('button button-secondary cancel');
-				},
-				focus: function () {
-					const buttons = $(this).dialog('widget').find('.ui-dialog-buttonpane button');
-					// Disable default "focus first button" behavior
-					buttons.first().blur();
-				},
+		createConfirmationDialog: (dialogElm, dialogTitle, targetUrl) => {
+			const dialog = dialogElm[0];
+
+			// Remove any existing inserted content
+			dialog.querySelector('.modal-title')?.remove();
+			dialog.querySelector('.modal-options')?.remove();
+
+			// Create and insert the title
+			const title = document.createElement('h2');
+			title.textContent = dialogTitle;
+			title.classList.add('modal-title');
+			dialog.prepend(title);
+
+			// Create and insert the options
+			const optionsWrapper = document.createElement('div');
+			optionsWrapper.classList.add('modal-options');
+			const confirmButton = VE.helpers.createButton('OK', 'submit', ['button']);
+			const cancelButton = VE.helpers.createButton('Cancel', 'button', [
+				'button',
+				'button-secondary',
+				'cancel',
+			]);
+			optionsWrapper.appendChild(confirmButton);
+			if (targetUrl) {
+				optionsWrapper.appendChild(cancelButton);
+			}
+			dialog.appendChild(optionsWrapper);
+
+			// Add event handlers (use onclick to avoid multiple handlers)
+			confirmButton.onclick = () => {
+				if (targetUrl) {
+					window.location.href = targetUrl;
+				}
+				dialog.close();
+			};
+			cancelButton.onclick = () => {
+				dialog.close();
 			};
+			document.addEventListener('keydown', (event) => {
+				if (event.key === 'Escape') {
+					dialog.close();
+				}
+			});
 
-			const reference_copied = $(elm[0]).clone();
-			const config = { ...default_config, ...custom_config };
-			$(reference_copied).dialog(config);
+			dialog.showModal();
+		},
+		createButton: (text, type, classNames) => {
+			const button = document.createElement('button');
+			button.type = type;
+			button.textContent = text;
+			button.classList.add(...classNames);
+			return button;
 		},
 		warn: (msg) => {
 			alert('WARNING: ' + msg);

web/js/init.js

@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
 	});
 
 	// TODO: Replace with autofocus
-	if (document.querySelectorAll('.ui-dialog').length == 0) {
+	if (document.querySelectorAll('dialog.modal[open]').length == 0) {
 		const input = document.querySelector(
 			'#vstobjects .form-control:not([disabled]),\
 			#vstobjects .form-select:not([disabled])'

web/js/shortcuts.js

@@ -388,27 +388,27 @@ document.addEventListener('alpine:init', () => {
 				}
 
 				if (Alpine.store('form').dirty) {
-					if (!$('.ui-dialog').is(':visible')) {
+					if (document.querySelector('dialog.modal[open]')) {
+						const dialog = document.querySelector('dialog.modal[open]');
+						dialog.querySelector('button[type="submit"]').click();
+					} else {
 						VE.helpers.createConfirmationDialog(
 							$('.js-confirm-dialog-redirect')[0],
 							'',
 							document.querySelector(`${VE.navigation.state.menu_selector}.focus a`).href
 						);
-					} else {
-						// if dialog is opened - submitting confirm box by "enter" shortcut
-						document.querySelector('.ui-dialog button.submit').click();
 					}
 				} else {
-					if (!$('.ui-dialog').is(':visible')) {
+					if (document.querySelector('dialog.modal[open]')) {
+						const dialog = document.querySelector('dialog.modal[open]');
+						dialog.querySelector('button[type="submit"]').click();
+					} else {
 						const el = $('.units.active .l-unit.focus .shortcut-enter');
 						if (el.length) {
 							VE.navigation.shortcut(el);
 						} else {
 							VE.navigation.enter_focused();
 						}
-					} else {
-						// if dialog is opened - submitting confirm box by "enter" shortcut
-						document.querySelector('.ui-dialog button.submit').click();
 					}
 				}
 			},

web/templates/footer.php

@@ -13,9 +13,9 @@
 		</button>)
 	</p>
 <?php } ?>
-	<div title="<?= _("Confirmation") ?>" class="dialog js-confirm-dialog-redirect">
+	<dialog class="modal js-confirm-dialog-redirect">
 		<p><?= _("LEAVE_PAGE_CONFIRMATION") ?></p>
-	</div>
+	</dialog>
 
 	<div class="fullscreen-loader">
 		<i class="fas fa-circle-notch fa-spin"></i>
@@ -76,36 +76,20 @@
 	</a>
 
 <?php if (!empty($_SESSION["error_msg"])): ?>
-	<div>
-		<script>
-			window.onload=function(){
-				$(function() {
-					$('#dialog:ui-dialog').dialog('destroy');
-					$('#dialog-message').dialog({
-						modal: true,
-						resizable: false,
-						buttons: {
-							Ok: function() {
-								$(this).dialog('close');
-							}
-						},
-						create: function() {
-							var buttonGroup = $(this).closest(".ui-dialog").find('.ui-dialog-buttonset');
-							buttonGroup.find('button:first').addClass('button submit')
-							buttonGroup.find('button:last').addClass('button button-secondary cancel');
-						}
-					});
-				});
-			}
-		</script>
-		<div id="dialog-message" title="">
-			<p><?= htmlentities($_SESSION["error_msg"]) ?></p>
-		</div>
-	</div>
+	<dialog id="error-dialog" class="modal">
+		<p><?= htmlentities($_SESSION["error_msg"]) ?></p>
+	</dialog>
+	<script>
+		window.onload = function() {
+			VE.helpers.createConfirmationDialog($('#error-dialog'), '<?= _("Error") ?>');
+		}
+	</script>
 <?php
 	unset($_SESSION['error_msg']);
 	endif;
+?>
 
+<?php
 	if (($_SESSION['DEBUG_MODE']) == "true") {
 		require $_SERVER['HESTIA'] . '/web/templates/pages/debug_panel.php';
 	}

web/templates/pages/list_access_keys.php

@@ -80,10 +80,10 @@
 								<a id="delete_link_<?= $i ?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 									<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 									<input type="hidden" name="delete_url" value="/delete/access-key/?key=<?= $key ?>&token=<?= $_SESSION["token"] ?>">
-									<div id="delete_dialog_<?= $i ?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-										<p><?= sprintf(_("DELETE_ACCESS_KEY_CONFIRMATION"), $key) ?></p>
-									</div>
 								</a>
+								<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+									<p><?= sprintf(_("DELETE_ACCESS_KEY_CONFIRMATION"), $key) ?></p>
+								</dialog>
 							</div>
 						</div>
 					</div>

web/templates/pages/list_backup.php

@@ -99,10 +99,10 @@
 											<a id="delete_link_<?= $i ?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 												<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 												<input type="hidden" name="delete_url" value="/delete/backup/?backup=<?= $key ?>&token=<?= $_SESSION["token"] ?>">
-												<div id="delete_dialog_<?= $i ?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-													<p><?= sprintf(_("DELETE_BACKUP_CONFIRMATION"), $key) ?></p>
-												</div>
 											</a>
+											<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+												<p><?= sprintf(_("DELETE_BACKUP_CONFIRMATION"), $key) ?></p>
+											</dialog>
 										</div>
 									<?php } ?>
 								<?php } ?>

web/templates/pages/list_cron.php

@@ -115,19 +115,19 @@
 									<a id="<?= $spnd_action ?>_link_<?= $i ?>" class="data-controls do_<?= $spnd_action ?>" title="<?= _($spnd_action) ?>">
 										<i class="fas <?= $spnd_icon ?> icon-highlight icon-dim do_<?= $spnd_action ?>"></i>
 										<input type="hidden" name="<?= $spnd_action ?>_url" value="/<?= $spnd_action ?>/cron/?job=<?= $data[$key]["JOB"] ?>&token=<?= $_SESSION["token"] ?>">
-										<div id="<?= $spnd_action ?>_dialog_<?= $i ?>" class="dialog js-confirm-dialog-suspend" title="<?= _("Confirmation") ?>">
-											<p><?= sprintf($spnd_confirmation, $key) ?></p>
-										</div>
 									</a>
+									<dialog id="<?= $spnd_action ?>_dialog_<?= $i ?>" class="modal js-confirm-dialog-suspend">
+										<p><?= sprintf($spnd_confirmation, $key) ?></p>
+									</dialog>
 								</div>
 								<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
 									<a id="delete_link_<?= $i ?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 										<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/cron/?job=<?= $data[$key]["JOB"] ?>&token=<?= $_SESSION["token"] ?>">
-										<div id="delete_dialog_<?= $i ?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-											<p><?= sprintf(_("DELETE_CRON_CONFIRMATION"), $key) ?></p>
-										</div>
 									</a>
+									<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+										<p><?= sprintf(_("DELETE_CRON_CONFIRMATION"), $key) ?></p>
+									</dialog>
 								</div>
 							<?php } ?>
 						</div>

web/templates/pages/list_db.php

@@ -158,19 +158,19 @@ if (!empty($_SESSION["DB_PGA_ALIAS"])) {
 										<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 											<i class="fas <?=$spnd_icon?> icon-highlight icon-dim do_<?=$spnd_action?>"></i>
 											<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/db/?database=<?=$key?>&token=<?=$_SESSION['token']?>">
-											<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?= _("Confirmation") ?>">
-												<p><?=sprintf($spnd_confirmation,$key)?></p>
-											</div>
 										</a>
+										<dialog id="<?= $spnd_action ?>_dialog_<?= $i ?>" class="modal js-confirm-dialog-suspend">
+											<p><?=sprintf($spnd_confirmation,$key)?></p>
+										</dialog>
 									</div>
 									<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
 										<a id="delete_link_<?= $i ?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 											<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 											<input type="hidden" name="delete_url" value="/delete/db/?database=<?= $key ?>&token=<?= $_SESSION["token"] ?>">
-											<div id="delete_dialog_<?= $i ?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-												<p><?= sprintf(_("DELETE_DATABASE_CONFIRMATION"), $key) ?></p>
-											</div>
 										</a>
+										<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+											<p><?= sprintf(_("DELETE_DATABASE_CONFIRMATION"), $key) ?></p>
+										</dialog>
 									</div>
 								<?php } ?>
 							</div>

web/templates/pages/list_dns.php

@@ -122,19 +122,19 @@
 									<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 										<i class="fas <?=$spnd_icon?> icon-highlight icon-dim do_<?=$spnd_action?>"></i>
 										<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/dns/?domain=<?=htmlentities($key);?>&token=<?=$_SESSION['token']?>">
-										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?= _("Confirmation") ?>">
-											<p><?=sprintf($spnd_confirmation,$key)?></p>
-										</div>
 									</a>
+									<dialog id="<?= $spnd_action ?>_dialog_<?= $i ?>" class="modal js-confirm-dialog-suspend">
+										<p><?=sprintf($spnd_confirmation,$key)?></p>
+									</dialog>
 								</div>
 								<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
 									<a id="delete_link_<?= $i ?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 										<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/dns/?domain=<?= htmlentities($key) ?>&token=<?= $_SESSION["token"] ?>">
-										<div id="delete_dialog_<?= $i ?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-											<p><?= sprintf(_("DELETE_DOMAIN_CONFIRMATION"), $key) ?></p>
-										</div>
 									</a>
+									<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+										<p><?= sprintf(_("DELETE_DOMAIN_CONFIRMATION"), $key) ?></p>
+									</dialog>
 								</div>
 							<?php } ?>
 						</div>

web/templates/pages/list_dns_rec.php

@@ -116,10 +116,10 @@
 								<a id="delete_link_<?= $i ?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 									<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 									<input type="hidden" name="delete_url" value="/delete/dns/?domain=<?= htmlspecialchars($_GET["domain"]) ?>&record_id=<?= $data[$key]["ID"] ?>&token=<?= $_SESSION["token"] ?>">
-									<div id="delete_dialog_<?= $i ?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-										<p><?= sprintf(_("DELETE_RECORD_CONFIRMATION"), $key) ?></p>
-									</div>
 								</a>
+								<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+									<p><?= sprintf(_("DELETE_RECORD_CONFIRMATION"), $key) ?></p>
+								</dialog>
 							</div>
 						<?php } ?>
 					</div>

web/templates/pages/list_firewall.php

@@ -98,19 +98,19 @@
 									<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 										<i class="fas <?=$spnd_icon?> icon-highlight icon-dim do_<?=$spnd_action?>"></i>
 										<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>">
-										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?= _("Confirmation") ?>">
-											<p><?=sprintf($spnd_confirmation,$key)?></p>
-										</div>
 									</a>
+									<dialog id="<?= $spnd_action ?>_dialog_<?= $i ?>" class="modal js-confirm-dialog-suspend">
+										<p><?=sprintf($spnd_confirmation,$key)?></p>
+									</dialog>
 								</div>
 								<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
 									<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 										<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/firewall/?rule=<?=$key?>&token=<?=$_SESSION['token']?>">
-										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-											<p><?=sprintf(_('DELETE_RULE_CONFIRMATION'),$key)?></p>
-										</div>
 									</a>
+									<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+										<p><?=sprintf(_('DELETE_RULE_CONFIRMATION'),$key)?></p>
+									</dialog>
 								</div>
 							</div>
 						</div>

web/templates/pages/list_firewall_banlist.php

@@ -55,10 +55,10 @@
 								<a id="delete_link_<?= $i ?>" class="data-controls do_delete">
 									<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 									<input type="hidden" name="delete_url" value="/delete/firewall/banlist/?ip=<?= $ip ?>&chain=<?= $value["CHAIN"] ?>&token=<?= $_SESSION["token"] ?>">
-									<div id="delete_dialog_<?= $i ?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-										<p><?= sprintf(_("DELETE_IP_CONFIRMATION"), $key) ?></p>
-									</div>
 								</a>
+								<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+									<p><?= sprintf(_("DELETE_IP_CONFIRMATION"), $key) ?></p>
+								</dialog>
 							</div>
 						</div>
 					</div>

web/templates/pages/list_firewall_ipset.php

@@ -54,10 +54,10 @@
 								<a id="delete_link_<?= $i ?>" class="data-controls do_delete">
 									<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 									<input type="hidden" name="delete_url" value="/delete/firewall/ipset/?listname=<?= $listname ?>&token=<?= $_SESSION["token"] ?>">
-									<div id="delete_dialog_<?= $i ?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-										<p><?= sprintf(_("DELETE_IPSET_CONFIRMATION"), $key) ?></p>
-									</div>
 								</a>
+								<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+									<p><?= sprintf(_("DELETE_IPSET_CONFIRMATION"), $key) ?></p>
+								</dialog>
 							</div>
 						</div>
 					</div>

web/templates/pages/list_ip.php

@@ -78,10 +78,10 @@
 								<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 									<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 									<input type="hidden" name="delete_url" value="/delete/ip/?ip=<?=$key?>&token=<?=$_SESSION['token']?>">
-									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-										<p><?=sprintf(_('DELETE_IP_CONFIRMATION'),$key)?></p>
-									</div>
 								</a>
+								<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+									<p><?=sprintf(_('DELETE_IP_CONFIRMATION'),$key)?></p>
+								</dialog>
 							</div>
 						</div>
 					</div>

web/templates/pages/list_key.php

@@ -44,10 +44,10 @@
 									<?php } else { ?>
 										<input type="hidden" name="delete_url" value="/delete/key/?key=<?= $key ?>&token=<?= $_SESSION["token"] ?>">
 									<?php } ?>
-									<div id="delete_dialog_<?= $i ?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-										<p><?= sprintf(_("DELETE_KEY_CONFIRM"), $key) ?></p>
-									</div>
 								</a>
+								<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+									<p><?= sprintf(_("DELETE_KEY_CONFIRM"), $key) ?></p>
+								</dialog>
 							</div>
 						</div>
 					</div>

web/templates/pages/list_log.php

@@ -42,10 +42,10 @@
 							<?php } else { ?>
 								<input type="hidden" name="delete_url" value="/delete/log/?token=<?= $_SESSION["token"] ?>">
 							<?php } ?>
-							<div class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-								<p><?= _("DELETE_LOGS_CONFIRMATION") ?></p>
-							</div>
 						</a>
+						<dialog class="modal js-confirm-dialog-delete">
+							<p><?= _("DELETE_LOGS_CONFIRMATION") ?></p>
+						</dialog>
 					</div>
 				<?php } ?>
 			<?php } ?>

web/templates/pages/list_log_auth.php

@@ -22,10 +22,10 @@
 							<?php } else { ?>
 								<input type="hidden" name="delete_url" value="/delete/log/auth/?token=<?= $_SESSION["token"] ?>">
 							<?php } ?>
-							<div class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-								<p><?= _("DELETE_LOGS_CONFIRMATION") ?></p>
-							</div>
 						</a>
+						<dialog class="modal js-confirm-dialog-delete">
+							<p><?= _("DELETE_LOGS_CONFIRMATION") ?></p>
+						</dialog>
 					</div>
 				<?php } ?>
 			<?php } ?>

web/templates/pages/list_mail.php

@@ -167,19 +167,19 @@
 										<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 											<i class="fas <?=$spnd_icon?> icon-highlight icon-dim do_<?=$spnd_action?>"></i>
 											<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/mail/?domain=<?=$key?>&token=<?=$_SESSION['token']?>">
-											<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?= _("Confirmation") ?>">
-												<p><?=sprintf($spnd_confirmation,$key)?></p>
-											</div>
 										</a>
+										<dialog id="<?= $spnd_action ?>_dialog_<?= $i ?>" class="modal js-confirm-dialog-suspend">
+											<p><?=sprintf($spnd_confirmation,$key)?></p>
+										</dialog>
 									</div>
 									<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
 										<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 											<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 											<input type="hidden" name="delete_url" value="/delete/mail/?domain=<?=$key?>&token=<?=$_SESSION['token']?>">
-											<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-												<p><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
-											</div>
 										</a>
+										<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+											<p><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
+										</dialog>
 									</div>
 								<?php } ?>
 							</div>

web/templates/pages/list_mail_acc.php

@@ -161,19 +161,19 @@ if (!empty($_SESSION["WEBMAIL_ALIAS"])) {
 									<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 										<i class="fas <?=$spnd_icon?> icon-highlight icon-dim do_<?=$spnd_action?>"></i>
 										<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>">
-										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?= _("Confirmation") ?>">
-											<p><?=sprintf($spnd_confirmation,$key)?></p>
-										</div>
 									</a>
+									<dialog id="<?= $spnd_action ?>_dialog_<?= $i ?>" class="modal js-confirm-dialog-suspend">
+										<p><?=sprintf($spnd_confirmation,$key)?></p>
+									</dialog>
 								</div>
 								<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
 									<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 										<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/mail/?domain=<?=htmlspecialchars($_GET['domain'])?>&account=<?=$key?>&token=<?=$_SESSION['token']?>">
-										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-											<p><?=sprintf(_('DELETE_MAIL_ACCOUNT_CONFIRMATION'),$key)?></p>
-										</div>
 									</a>
+									<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+										<p><?=sprintf(_('DELETE_MAIL_ACCOUNT_CONFIRMATION'),$key)?></p>
+									</dialog>
 								</div>
 							<?php } ?>
 						</div>

web/templates/pages/list_packages.php

@@ -93,10 +93,10 @@
 									<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?= _("Delete") ?>">
 										<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/package/?package=<?=$key?>&token=<?=$_SESSION['token']?>">
-										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-											<p><?=sprintf(_('DELETE_PACKAGE_CONFIRMATION'),$key)?></p>
-										</div>
 									</a>
+									<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+										<p><?=sprintf(_('DELETE_PACKAGE_CONFIRMATION'),$key)?></p>
+									</dialog>
 								</div>
 							<?php } ?>
 						</div>

web/templates/pages/list_services.php

@@ -23,10 +23,10 @@
 				<a class="data-controls do_servicerestart button button-secondary button-danger">
 					<i class="do_servicerestart fas fa-arrow-rotate-left icon-red"></i><?= _("Restart") ?>
 					<input type="hidden" name="servicerestart_url" value="/restart/system/?hostname=<?= $sys["sysinfo"]["HOSTNAME"] ?>&token=<?= $_SESSION["token"] ?>&system_reset_token=<?= time() ?>">
-					<div class="dialog js-confirm-dialog-servicerestart" title="<?= _("Confirmation") ?>">
-						<p><?= sprintf(_("RESTART_CONFIRMATION"), "Server") ?></p>
-					</div>
 				</a>
+				<dialog class="modal js-confirm-dialog-servicerestart">
+					<p><?= sprintf(_("RESTART_CONFIRMATION"), "Server") ?></p>
+				</dialog>
 			</div>
 		</div>
 		<div class="toolbar-right">
@@ -151,19 +151,19 @@
 								<a id="restart_link_<?=$i?>" class="data-controls do_servicerestart" title="<?= _("restart") ?>">
 									<i class="do_servicerestart data-controls fas fa-arrow-rotate-left icon-highlight icon-dim"></i>
 									<input type="hidden" name="servicerestart_url" value="/restart/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>">
-									<div id="restart_link_dialog_<?=$i?>" class="dialog js-confirm-dialog-servicerestart" title="<?= _("Confirmation") ?>">
-										<p><?=sprintf(_('RESTART_CONFIRMATION'),$key); ?></p>
-									</div>
 								</a>
+								<dialog id="restart_link_dialog_<?=$i?>" class="modal js-confirm-dialog-servicerestart">
+									<p><?=sprintf(_('RESTART_CONFIRMATION'),$key); ?></p>
+								</dialog>
 							</div>
 							<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
 								<a id="delete_link_<?=$i?>" class="data-controls do_servicestop" title="<?=_($action)?>">
 									<i class="do_servicestop fas <?=$spnd_icon?> icon-red icon-dim"></i>
 									<input type="hidden" name="servicestop_url" value="/<?=$action ?>/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>">
-									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-servicestop" title="<?= _("Confirmation") ?>">
-										<p><?php if($action == 'stop'){ echo sprintf(_('Are you sure you want to stop service'),$key); }else{ echo sprintf(_('Are you sure you want to start service'),$key); }?></p>
-									</div>
 								</a>
+								<dialog id="delete_dialog_<?=$i?>" class="modal js-confirm-dialog-servicestop">
+									<p><?php if($action == 'stop'){ echo sprintf(_('Are you sure you want to stop service'),$key); }else{ echo sprintf(_('Are you sure you want to start service'),$key); }?></p>
+								</dialog>
 							</div>
 						</div>
 					</div>

web/templates/pages/list_user.php

@@ -135,19 +135,19 @@
 									<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 										<i class="fas <?=$spnd_icon?> icon-highlight icon-dim do_<?=$spnd_action?>"></i>
 										<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>">
-										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?= _("Confirmation") ?>">
-											<p><?=sprintf($spnd_confirmation,$key)?></p>
-										</div>
 									</a>
+									<dialog id="<?= $spnd_action ?>_dialog_<?= $i ?>" class="modal js-confirm-dialog-suspend">
+										<p><?=sprintf($spnd_confirmation,$key)?></p>
+									</dialog>
 								</div>
 								<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
 									<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 										<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 										<input type="hidden" name="delete_url" value="/delete/user/?user=<?=$key?>&token=<?=$_SESSION['token']?>">
-										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-											<p><?=sprintf(_('DELETE_USER_CONFIRMATION'),$key)?></p>
-										</div>
 									</a>
+									<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+										<p><?=sprintf(_('DELETE_USER_CONFIRMATION'),$key)?></p>
+									</dialog>
 								</div>
 								<?php } ?>
 							<?php } ?>

web/templates/pages/list_web.php

@@ -207,19 +207,19 @@
 										<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 											<i class="fas <?=$spnd_icon?> icon-highlight icon-dim do_<?=$spnd_action?>"></i>
 											<input type="hidden" name="<?=$spnd_action?>_url" value="/<?=$spnd_action?>/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>">
-											<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?= _("Confirmation") ?>">
-												<p><?=sprintf($spnd_confirmation,$key)?></p>
-											</div>
 										</a>
+										<dialog id="<?= $spnd_action ?>_dialog_<?= $i ?>" class="modal js-confirm-dialog-suspend">
+											<p><?=sprintf($spnd_confirmation,$key)?></p>
+										</dialog>
 									</div>
 									<div class="actions-panel__col actions-panel__delete shortcut-delete" key-action="js">
 										<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?= _("delete") ?>">
 											<i class="fas fa-trash icon-red icon-dim do_delete"></i>
 											<input type="hidden" name="delete_url" value="/delete/web/?domain=<?=$key?>&token=<?=$_SESSION['token']?>">
-											<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?= _("Confirmation") ?>">
-												<p><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
-											</div>
 										</a>
+										<dialog id="delete_dialog_<?= $i ?>" class="modal js-confirm-dialog-delete">
+											<p><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
+										</dialog>
 									</div>
 								<?php } ?>
 							</div>