Оформить сообщение и убрать лишнее

139

31 июля 2019, 05:50

Как чтобы сообщение выходило по середине, вместо ОК и Отмена чтобы было Да и Нет, также применить к сообщению стили прямо в этой функции(шрифт по жирнее, окно по красивее ) ну и убрать фразу – Подтвердите действие на странице localhost:…

 else if($('#type').val() == 1 && $('#name_pred').val() == 0){
     strMessage = (typeof strMessage !== 'undefined') ? strMessage : 'Обращение в отношении заявителя?'; 
     return !!confirm( strMessage );         
    }

Answer 1

Стандартный confirm кастомизировать нельзя. Но есть несколько вариантов что можно сделать.

Воспользоваться готовым решением, например, JQuery UI dialog

$(function() { 
  $('.openModal').on('click', function () { 
    $('#dialog-confirm').dialog({ 
      resizable: false, 
      height: 'auto', 
      width: 400, 
      modal: true, 
      buttons: { 
        'Да': function() { 
          $(this).dialog('close'); 
          // сделать что-то если да 
        }, 
        'Нет': function() { 
          $(this).dialog('close'); 
          // сделать что-то если нет 
        } 
      } 
    }); 
  }); 
 });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<div id="dialog-confirm" title="Обращение в отношении заявителя?"> 
</div> 
 
<button type="button" class="ui-button ui-corner-all ui-widget openModal">Открыть модальное окно</button>

Написать свое модальное окно

$(function () { 
  $('.openModal').on('click', function () { 
    $('.modalDialog').show(); 
  }); 
  $('.close').on('click', function() { 
    $('.modalDialog').hide(); 
  }); 
});

.modalDialog { 
  position: fixed; 
  font-family: Arial, Helvetica, sans-serif; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  background: rgba(0,0,0,0.8); 
  z-index: 99999; 
  opacity: 1; 
  display: none; 
} 
 
.modalDialog > div { 
  width: 400px; 
  position: relative; 
  margin: 10% auto; 
  padding: 5px 20px 13px 20px; 
  border-radius: 5px; 
  background: #fff; 
  background: -moz-linear-gradient(#fff, #999); 
  background: -webkit-linear-gradient(#fff, #999); 
  background: -o-linear-gradient(#fff, #999); 
} 
 
.close { 
  background: #606061; 
  color: #FFFFFF; 
  line-height: 25px; 
  position: absolute; 
  right: -12px; 
  text-align: center; 
  top: -10px; 
  width: 24px; 
  text-decoration: none; 
  font-weight: bold; 
  -webkit-border-radius: 12px; 
  -moz-border-radius: 12px; 
  border-radius: 12px; 
  -moz-box-shadow: 1px 1px 3px #000; 
  -webkit-box-shadow: 1px 1px 3px #000; 
  box-shadow: 1px 1px 3px #000; 
} 
 
.close:hover { background: #00d9ff; } 
 
button { 
  color: #fff;  
  user-select: none; 
  background: #D44B38; 
  padding: .7em 1.5em; 
  outline: none; 
} 
button:hover { background: #E85F4C; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button class="openModal">Открыть модальное окно</button> 
 
<div class="modalDialog"> 
  <div> 
    <a href="#close" title="Close" class="close">X</a> 
      <h2>Обращение в отношении заявителя?</h2> 
      <button>Да</button>    
      <button>Нет</button>    
   </div> 
</div>