Tidy modals (#2981)

* Use .dialog instead of .u-hidden for initially hiding modals

* Upgrade jQuery UI 1.13.0 -> 1.13.2

* Tidy jQuery UI CSS

* Tidy spacing

* Better integrate jQuery UI CSS

Reduces custom overrides.

* Disable resizable modals

Which we don't have CSS for.

* Further refine dialog CSS

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

@@ -1,13 +1,14 @@
 /*!
- * JQuery UI Custom + few changes
+ * jQuery UI v1.13.2 + few changes
  */
+
+/* Dialog */
 .ui-dialog {
 	position: absolute;
 	top: 0;
 	left: 0;
 	padding: .2em;
 	outline: 0;
-	z-index: 1000 !important;
 }
 .ui-dialog .ui-dialog-titlebar {
 	padding: .4em 1em;
@@ -90,6 +91,8 @@
 	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: .2em;
@@ -131,20 +134,35 @@
 	padding: 1em 1.4em;
 	background: none;
 }
-.ui-dialog-titlebar-close{
-	display: none !important;
-}
 
-.ui-tabs-panel{
-	clear:both !important;
+/* Layout helpers */
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
 }
 
+/* Overlays */
 .ui-widget-overlay {
-	 background-color: rgba(0,0,0,0.9);
-	 height: 100%;
-	 width:100%;
-	 z-index: 999 !important;
-	 position: absolute;
-	 top:0px;
-	 left:0px;
- }
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+/* NOTE: Custom changes follow */
+
+/* Hide the default close button in dialog header */
+.ui-dialog-titlebar-close {
+	display: none;
+}
+
+/* Set high z-index for dialog to override .l-header */
+.ui-front {
+	z-index: 1000;
+}

web/css/src/themes/dark.css

@@ -1304,8 +1304,7 @@ form#vstobjects.suspended {
 }
 
 .ui-dialog .ui-dialog-buttonpane {
-  border-color: #404040 !important;
-  background-color: #252525 !important;
+  border-top: 1px solid #404040 !important;
 }
 
 .shortcuts {
@@ -1432,18 +1431,6 @@ form#vstobjects.suspended {
   font-weight: 600;
 }
 
-.ui-dialog-buttonpane {
-
-}
-
-.ui-widget {
-
-}
-
-.ui-widget-overlay {
-
-}
-
 .helper-container {
   box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
   border: 1px solid #606060;

web/css/src/themes/default.css

@@ -2530,7 +2530,12 @@ td.hint {
 
 .ftp-path-prefix { padding-top: 12px; font-size: 0.8rem; color: #555; }
 
+.dialog {
+  display: none;
+}
+
 .ui-dialog .ui-dialog-buttonpane button {
+  margin-bottom: 4px;
   box-shadow:
     0 1px 4px rgb(0 0 0 / 20%),
     inset 0 0 1px #fff,
@@ -2538,7 +2543,9 @@ td.hint {
 }
 
 .ui-dialog .ui-dialog-buttonpane {
-  margin-bottom: -6px !important;
+  border-color: #fff !important;
+  box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
+  margin-top: 0 !important;
   padding: 0 !important;
 }
 
@@ -3549,23 +3556,13 @@ form#vstobjects.suspended {
   font-weight: 500;
 }
 
-.ui-dialog-buttonpane {
-  border-color: #fff !important;
-  box-shadow: inset 0 0 2px rgb(0 0 0 / 25%);
-  border-bottom: 1px solid #fff !important;
-  background: #e0e0e0;
-  margin-top: 0 !important;
-  padding-top: 0 !important;
-}
-
 .ui-widget {
-  font-size: 0.85rem !important;
+  font-size: 0.85rem;
 }
 
 .ui-widget-overlay {
-  opacity: 0.8 !important;
-  background: rgb(10 10 10 / 90%) !important;
-  position: fixed !important;
+  opacity: 0.8;
+  background: rgb(10 10 10 / 90%);
 }
 
 .helper-container {

web/js/events.js

@@ -75,7 +75,7 @@ VE.core.dispatch = function(evt, elm, event_type) {
 VE.callbacks.click.do_suspend = function(evt, elm) {
      var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
      var url = $('input[name="suspend_url"]', ref).val();
-     var dialog_elm = ref.find('.confirmation-text-suspention');
+     var dialog_elm = ref.find('.js-confirm-dialog-suspend');
      VE.helpers.createConfirmationDialog(dialog_elm, $(elm).parent().attr('title'), url);
 }
 
@@ -85,7 +85,7 @@ VE.callbacks.click.do_suspend = function(evt, elm) {
 VE.callbacks.click.do_unsuspend = function(evt, elm) {
      var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
      var url = $('input[name="unsuspend_url"]', ref).val();
-     var dialog_elm = ref.find('.confirmation-text-suspention');
+     var dialog_elm = ref.find('.js-confirm-dialog-suspend');
      VE.helpers.createConfirmationDialog(dialog_elm, $(elm).parent().attr('title'), url);
 }
 
@@ -95,21 +95,21 @@ VE.callbacks.click.do_unsuspend = function(evt, elm) {
 VE.callbacks.click.do_delete = function(evt, elm) {
      var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
      var url = $('input[name="delete_url"]', ref).val();
-     var dialog_elm = ref.find('.confirmation-text-delete');
+     var dialog_elm = ref.find('.js-confirm-dialog-delete');
      VE.helpers.createConfirmationDialog(dialog_elm, $(elm).parent().attr('title'), url);
 }
 
 VE.callbacks.click.do_servicerestart = function(evt, elm) {
     var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
     var url = $('input[name="servicerestart_url"]', ref).val();
-    var dialog_elm = ref.find('.confirmation-text-servicerestart');
+    var dialog_elm = ref.find('.js-confirm-dialog-servicerestart');
     VE.helpers.createConfirmationDialog(dialog_elm, $(elm).parent().attr('title'), url);
 }
 
 VE.callbacks.click.do_servicestop = function(evt, elm) {
     var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
     var url = $('input[name="servicestop_url"]', ref).val();
-    var dialog_elm = ref.find('.confirmation-text-servicestop');
+    var dialog_elm = ref.find('.js-confirm-dialog-servicestop');
     VE.helpers.createConfirmationDialog(dialog_elm, $(elm).parent().attr('title'), url);
 }
 
@@ -148,10 +148,6 @@ VE.helpers.createConfirmationDialog = function(elm, dialog_title, confirmed_loca
                 .find(".ui-button")
                 .eq(1) // the first button
                 .addClass("cancel");
-            $(this).closest(".ui-dialog")
-                .find(".ui-dialog-content:first")
-                .removeClass('u-hidden');
-            
         }
     }
 

web/js/init.js

@@ -162,7 +162,7 @@ $(document).ready(function(){
               shortcut.add("Ctrl+Backspace", function(){
                 var redirect = $('a.ui-button#btn-back').attr('href')
                 if(VE.tmp.form_changed && redirect){
-                  VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', redirect);
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', redirect);
                 } else if($('form#vstobjects .button.cancel')[0]){
                   location.href=$('form#vstobjects input.cancel').attr('onclick').replace("location.href='", "").replace("'","");
                 } else if(redirect){
@@ -216,7 +216,7 @@ $(document).ready(function(){
                   return;
                 }
                 if(VE.tmp.form_changed){
-                  VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
                 } else {
                   location.href=target.attr('href');
                 }
@@ -234,7 +234,7 @@ $(document).ready(function(){
                   return;
                 }
                 if(VE.tmp.form_changed){
-                  VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
                 } else {
                   location.href=target.attr('href');
                 }
@@ -252,7 +252,7 @@ $(document).ready(function(){
                   return;
                 }
                 if(VE.tmp.form_changed){
-                  VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
                 } else {
                   location.href=target.attr('href');
                 }
@@ -270,7 +270,7 @@ $(document).ready(function(){
                   return;
                 }
                 if(VE.tmp.form_changed){
-                  VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
                 } else {
                   location.href=target.attr('href');
                 }
@@ -288,7 +288,7 @@ $(document).ready(function(){
                   return;
                 }
                 if(VE.tmp.form_changed){
-                  VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
                 } else {
                   location.href=target.attr('href');
                 }
@@ -306,7 +306,7 @@ $(document).ready(function(){
                   return;
                 }
                 if(VE.tmp.form_changed){
-                  VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
                 } else {
                   location.href=target.attr('href');
                 }
@@ -324,7 +324,7 @@ $(document).ready(function(){
                   return;
                 }
                 if(VE.tmp.form_changed){
-                  VE.helpers.createConfirmationDialog($('.confirmation-text-redirect'), '', target.attr('href'));
+                  VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect'), '', target.attr('href'));
                 } else {
                   location.href=target.attr('href');
                 }
@@ -512,7 +512,7 @@ $(document).ready(function(){
 
                 if(VE.tmp.form_changed){
                   if(!$('.ui-dialog').is(':visible')){
-                    VE.helpers.createConfirmationDialog($('.confirmation-text-redirect')[0], '', $(VE.navigation.state.menu_selector + '.focus a').attr('href'));
+                    VE.helpers.createConfirmationDialog($('.js-confirm-dialog-redirect')[0], '', $(VE.navigation.state.menu_selector + '.focus a').attr('href'));
                   } else { // if dialog is opened - submitting confirm box by "enter" shortcut
                     $('.ui-dialog button.submit').click();
                   }

web/templates/footer.html

@@ -13,7 +13,7 @@
     }
   }
 ?>
-  <div title="<?=_('Confirmation');?>" class="confirmation-text-redirect u-hidden">
+  <div title="<?=_('Confirmation');?>" class="dialog js-confirm-dialog-redirect">
     <p class="confirmation"><?=_('LEAVE_PAGE_CONFIRMATION')?></p>
   </div>
 

web/templates/includes/end_js.html

@@ -7,7 +7,7 @@
 <script src="/js/init.js?<?=JS_LATEST_UPDATE?>"></script>
 <script src="/js/i18n.js.php?<?=JS_LATEST_UPDATE?>"></script>
 <script src="/js/templates.js?<?=JS_LATEST_UPDATE?>"></script>
-<?php foreach(new DirectoryIterator($_SERVER['HESTIA'].'/web/js/custom_scripts') as $customScript){ 
+<?php foreach(new DirectoryIterator($_SERVER['HESTIA'].'/web/js/custom_scripts') as $customScript){
 	if($customScript->getExtension() === 'js'){
 		echo '<script src="/js/custom_scripts/'.rawurlencode($customScript->getBasename()).'"></script>';
 	} elseif($customScript->getExtension() === "php"){
@@ -29,6 +29,7 @@
 				$('#dialog:ui-dialog').dialog('destroy');
 				$('#dialog-message').dialog({
 					modal: true,
+					resizable: false,
 					buttons: {
 						Ok: function() {
 							$(this).dialog('close');

web/templates/pages/add_cron.html

@@ -377,7 +377,7 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="u-pt18">
+							<td class="u-pt6">
 								<label for="v_month" class="form-label"><?=_('Month');?></label>
 								<input type="text" class="form-control" name="v_month" id="v_month" style="width:220px;" value="<?=htmlentities(trim($v_month, "'"))?>">
 							</td>

web/templates/pages/edit_cron.html

@@ -377,7 +377,7 @@
 							</td>
 						</tr>
 						<tr>
-							<td class="u-pt18">
+							<td class="u-pt6">
 								<label for="v_month" class="form-label"><?=_('Month');?></label>
 								<input type="text" class="form-control" name="v_month" id="v_month" style="width:220px;" value="<?=htmlentities(trim($v_month, "'"))?>">
 							</td>

web/templates/pages/edit_user.html

@@ -33,7 +33,7 @@
 						<i class="do_delete fas fa-times-circle status-icon red"></i>
 						<?=_('Delete');?>
 						<input type="hidden" name="delete_url" value="/delete/user/?user=<?=htmlentities($v_username)?>&token=<?=$_SESSION['token']?>">
-						<div class="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+						<div class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 							<p class="confirmation"><?=sprintf(_('DELETE_USER_CONFIRMATION'),htmlentities($v_username))?></p>
 						</div>
 					</a>

web/templates/pages/list_access_keys.html

@@ -86,7 +86,7 @@
 								<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 									<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 										<p class="confirmation"><?=sprintf(_('DELETE_ACCESS_KEY_CONFIRMATION'),$key)?></p>
 									</div>
 								</a>

web/templates/pages/list_backup.html

@@ -105,7 +105,7 @@
 											<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 												<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+												<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 													<p class="confirmation"><?=sprintf(_('DELETE_BACKUP_CONFIRMATION'),$key)?></p>
 												</div>
 											</a>

web/templates/pages/list_cron.html

@@ -120,7 +120,7 @@
 									<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 										<i class="fas <?=$spnd_icon?> status-icon highlight status-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="confirmation-text-suspention u-hidden" title="<?=_('Confirmation');?>">
+										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
 										</div>
 									</a>
@@ -129,7 +129,7 @@
 									<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 										<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf(_('DELETE_CRON_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>

web/templates/pages/list_db.html

@@ -157,7 +157,7 @@
 										<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 											<i class="fas <?=$spnd_icon?> status-icon highlight status-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="confirmation-text-suspention u-hidden" title="<?=_('Confirmation');?>">
+											<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
 												<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
 											</div>
 										</a>
@@ -166,7 +166,7 @@
 										<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 											<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+											<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 												<p class="confirmation"><?=sprintf(_('DELETE_DATABASE_CONFIRMATION'),$key)?></p>
 											</div>
 										</a>

web/templates/pages/list_dns.html

@@ -120,7 +120,7 @@
 									<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 										<i class="fas <?=$spnd_icon?> status-icon highlight status-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="confirmation-text-suspention u-hidden" title="<?=_('Confirmation');?>">
+										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
 										</div>
 									</a>
@@ -129,7 +129,7 @@
 									<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 										<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>

web/templates/pages/list_dns_rec.html

@@ -121,7 +121,7 @@
 								<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 									<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 										<p class="confirmation"><?=sprintf(_('DELETE_RECORD_CONFIRMATION'),$key)?></p>
 									</div>
 								</a>

web/templates/pages/list_firewall.html

@@ -110,7 +110,7 @@
 									<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 										<i class="fas <?=$spnd_icon?> status-icon highlight status-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="confirmation-text-suspention u-hidden" title="<?=_('Confirmation');?>">
+										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
 										</div>
 									</a>
@@ -119,7 +119,7 @@
 									<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 										<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf(_('DELETE_RULE_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>

web/templates/pages/list_firewall_banlist.html

@@ -63,7 +63,7 @@
 								<a id="delete_link_<?=$i?>" class="data-controls do_delete">
 									<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 										<p class="confirmation"><?=sprintf(_('DELETE_IP_CONFIRMATION'),$key)?></p>
 									</div>
 								</a>

web/templates/pages/list_firewall_ipset.html

@@ -63,7 +63,7 @@
 								<a id="delete_link_<?=$i?>" class="data-controls do_delete">
 									<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 										<p class="confirmation"><?=sprintf(_('DELETE_IPSET_CONFIRMATION'), $key)?></p>
 									</div>
 								</a>

web/templates/pages/list_ip.html

@@ -84,7 +84,7 @@
 								<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 									<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+									<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 										<p class="confirmation"><?=sprintf(_('DELETE_IP_CONFIRMATION'),$key)?></p>
 									</div>
 								</a>

web/templates/pages/list_key.html

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

web/templates/pages/list_log.html

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

web/templates/pages/list_log_auth.html

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

web/templates/pages/list_mail.html

@@ -172,7 +172,7 @@
 										<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 											<i class="fas <?=$spnd_icon?> status-icon highlight status-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="confirmation-text-suspention u-hidden" title="<?=_('Confirmation');?>">
+											<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
 												<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
 											</div>
 										</a>
@@ -181,7 +181,7 @@
 										<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 											<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+											<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 												<p class="confirmation"><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
 											</div>
 										</a>

web/templates/pages/list_mail_acc.html

@@ -164,7 +164,7 @@
 									<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 										<i class="fas <?=$spnd_icon?> status-icon highlight status-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="confirmation-text-suspention u-hidden" title="<?=_('Confirmation');?>">
+										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
 										</div>
 									</a>
@@ -173,7 +173,7 @@
 									<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 										<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf(_('DELETE_MAIL_ACCOUNT_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>

web/templates/pages/list_packages.html

@@ -98,7 +98,7 @@
 									<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('Delete');?>">
 										<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf(_('DELETE_PACKAGE_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>

web/templates/pages/list_services.html

@@ -13,7 +13,7 @@
 				<a class="data-controls do_servicerestart ui-button danger cancel">
 					<i class="do_servicerestart fas fa-undo status-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="confirmation-text-servicerestart u-hidden" title="<?=_('Confirmation');?>">
+					<div class="dialog js-confirm-dialog-servicerestart" title="<?=_('Confirmation');?>">
 						<p class="confirmation"><?=sprintf(_('RESTART_CONFIRMATION'), 'Server');?></p>
 					</div>
 				</a>
@@ -150,7 +150,7 @@
 							<a id="restart_link_<?=$i?>" class="data-controls do_servicerestart" title="<?=_('restart');?>">
 								<i class="do_servicerestart data-controls fas fa-undo status-icon highlight status-icon dim icon-large"></i>
 								<input type="hidden" name="servicerestart_url" value="/restart/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>">
-								<div id="restart_link_dialog_<?=$i?>" class="confirmation-text-servicerestart u-hidden" title="<?=_('Confirmation');?>">
+								<div id="restart_link_dialog_<?=$i?>" class="dialog js-confirm-dialog-servicerestart" title="<?=_('Confirmation');?>">
 									<p class="confirmation"><?=sprintf(_('RESTART_CONFIRMATION'),$key); ?></p>
 								</div>
 							</a>
@@ -159,7 +159,7 @@
 							<a id="delete_link_<?=$i?>" class="data-controls do_servicestop" title="<?=_($action)?>">
 								<i class="do_servicestop fas <?=$spnd_icon?> status-icon red status-icon dim icon-large"></i>
 								<input type="hidden" name="servicestop_url" value="/<?=$action ?>/service/?srv=<?=$key?>&token=<?=$_SESSION['token']?>">
-								<div id="delete_dialog_<?=$i?>" class="confirmation-text-servicestop u-hidden" title="<?=_('Confirmation');?>">
+								<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-servicestop" title="<?=_('Confirmation');?>">
 									<p class="confirmation"><?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>

web/templates/pages/list_user.html

@@ -140,7 +140,7 @@
 									<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 										<i class="fas <?=$spnd_icon?> status-icon highlight status-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="confirmation-text-suspention u-hidden" title="<?=_('Confirmation');?>">
+										<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
 										</div>
 									</a>
@@ -149,7 +149,7 @@
 									<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 										<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+										<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 											<p class="confirmation"><?=sprintf(_('DELETE_USER_CONFIRMATION'),$key)?></p>
 										</div>
 									</a>

web/templates/pages/list_web.html

@@ -210,7 +210,7 @@
 										<a id="<?=$spnd_action ?>_link_<?=$i?>" class="data-controls do_<?=$spnd_action?>" title="<?=_($spnd_action)?>">
 											<i class="fas <?=$spnd_icon?> status-icon highlight status-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="confirmation-text-suspention u-hidden" title="<?=_('Confirmation');?>">
+											<div id="<?=$spnd_action?>_dialog_<?=$i?>" class="dialog js-confirm-dialog-suspend" title="<?=_('Confirmation');?>">
 												<p class="confirmation"><?=sprintf($spnd_confirmation,$key)?></p>
 											</div>
 										</a>
@@ -219,7 +219,7 @@
 										<a id="delete_link_<?=$i?>" class="data-controls do_delete" title="<?=_('delete');?>">
 											<i class="fas fa-trash status-icon red status-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="confirmation-text-delete u-hidden" title="<?=_('Confirmation');?>">
+											<div id="delete_dialog_<?=$i?>" class="dialog js-confirm-dialog-delete" title="<?=_('Confirmation');?>">
 												<p class="confirmation"><?=sprintf(_('DELETE_DOMAIN_CONFIRMATION'),$key)?></p>
 											</div>
 										</a>