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

This reverts commit 9c2004f692b9fbbd0cd185e1d0f1cdb502a69b5c.

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

@@ -1,7 +1,98 @@
 /*
- * "Tabs" CSS from jQuery UI v1.13.2
+ * Some parts of 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;
@@ -54,3 +145,12 @@
 .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: #303030;
+	background: rgb(48 48 48);
 	background: linear-gradient(
 		0deg,
 		rgb(48 48 48 / 100%) 0%,
@@ -591,22 +591,8 @@ 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;
@@ -774,22 +760,31 @@ strong {
 /* Modals
    ========================================================================== */
 
-.modal {
+.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 {
 	background-color: rgb(45 45 45 / 95%);
-	border-color: rgb(80 80 80 / 97%);
+	border: 1px solid rgb(80 80 80 / 97%);
 	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 25px rgb(0 0 0 / 90%);
+}
 
-	& p {
-		color: #dadada;
-	}
+.ui-dialog .ui-dialog-content {
+	color: #dadada;
 }
 
-.modal-title {
+.ui-dialog .ui-dialog-title {
 	color: #f12569;
+	font-weight: 600;
 }
 
-.modal-options {
-	border-top: 1px solid #404040;
+.ui-widget-header a {
+	color: #cacaca;
 }
 
 /* Shortcuts panel

web/css/src/themes/default.css

@@ -1719,38 +1719,60 @@
 /* Modals
    ========================================================================== */
 
-.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%);
+.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%);
+	box-shadow: inset 0 1px 3px rgb(0 0 0 / 25%), 0 8px 40px 0 rgb(0 0 0 / 35%);
+	border-radius: 6px;
 	border: 1px solid rgb(255 255 255 / 98%);
-	min-width: 360px;
-	max-width: 550px;
+	text-align: center;
+}
 
-	& p {
-		color: #535353;
-		text-align: center;
-		padding: 10px 20px 30px;
-	}
+.ui-dialog .ui-dialog-content {
+	color: #535353;
+	padding: 20px 26px 30px;
 }
 
-.modal-title {
+.ui-dialog .ui-dialog-title {
+	margin: 0;
 	color: #305ba9;
 	font-size: 1rem;
+	text-transform: none;
+	letter-spacing: -0.01em;
 	text-align: center;
-	padding: 15px;
+	float: none;
+	font-weight: 500;
+}
+
+.ui-widget-overlay {
+	background-color: rgb(0 0 0 / 60%);
 }
 
-.modal-options {
+.ui-dialog .ui-dialog-buttonpane {
+	border-color: #fff;
 	box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
-	display: flex;
-	justify-content: flex-end;
-	padding: 10px;
+	margin-top: 0;
+	padding: 0;
+}
 
-	& button {
-		margin-left: 6px;
-	}
+.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%);
 }
 
 /* Shortcuts panel

web/css/src/themes/flat.css

@@ -156,8 +156,12 @@ strong {
 /* Modals
    ========================================================================== */
 
-.modal {
+.ui-dialog {
 	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,18 +316,28 @@ strong {
 /* Modals
    ========================================================================== */
 
-.modal {
+.ui-dialog {
 	box-shadow: 0 2px 11px 0 rgb(0 0 0 / 50%);
 
-	& p {
-		color: #333;
+	& .ui-dialog-buttonpane button {
+		box-shadow: none;
 	}
 }
 
-.modal-title {
+.ui-widget,
+.ui-dialog,
+.ui-dialog .ui-dialog-title {
+	font-family: var(--font-family);
+}
+
+.ui-dialog .ui-dialog-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}.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}}
+: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}}

web/js/events.js

@@ -194,62 +194,45 @@ const VE = {
 	helpers: {
 		/**
 		 * Create dialog box on the fly
-		 * @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"
+		 * @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)
 		 */
-		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();
+		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();
+				},
 			};
-			document.addEventListener('keydown', (event) => {
-				if (event.key === 'Escape') {
-					dialog.close();
-				}
-			});
 
-			dialog.showModal();
-		},
-		createButton: (text, type, classNames) => {
-			const button = document.createElement('button');
-			button.type = type;
-			button.textContent = text;
-			button.classList.add(...classNames);
-			return button;
+			const reference_copied = $(elm[0]).clone();
+			const config = { ...default_config, ...custom_config };
+			$(reference_copied).dialog(config);
 		},
 		warn: (msg) => {
 			alert('WARNING: ' + msg);

web/js/init.js

@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
 	});
 
 	// TODO: Replace with autofocus
-	if (document.querySelectorAll('dialog.modal[open]').length == 0) {
+	if (document.querySelectorAll('.ui-dialog').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 (document.querySelector('dialog.modal[open]')) {
-						const dialog = document.querySelector('dialog.modal[open]');
-						dialog.querySelector('button[type="submit"]').click();
-					} else {
+					if (!$('.ui-dialog').is(':visible')) {
 						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 (document.querySelector('dialog.modal[open]')) {
-						const dialog = document.querySelector('dialog.modal[open]');
-						dialog.querySelector('button[type="submit"]').click();
-					} else {
+					if (!$('.ui-dialog').is(':visible')) {
 						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 } ?>
-	<dialog class="modal js-confirm-dialog-redirect">
+	<div title="<?= _("Confirmation") ?>" class="dialog js-confirm-dialog-redirect">
 		<p><?= _("LEAVE_PAGE_CONFIRMATION") ?></p>
-	</dialog>
+	</div>
 
 	<div class="fullscreen-loader">
 		<i class="fas fa-circle-notch fa-spin"></i>
@@ -76,20 +76,36 @@
 	</a>
 
 <?php if (!empty($_SESSION["error_msg"])): ?>
-	<dialog id="error-dialog" class="modal">
-		<p><?= htmlentities($_SESSION["error_msg"]) ?></p>
-	</dialog>
-	<script>
-		window.onload = function() {
-			VE.helpers.createConfirmationDialog($('#error-dialog'), '<?= _("Error") ?>');
-		}
-	</script>
+	<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>
 <?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>