Пользовательский диалог «подтверждения» в JavaScript?

Question

Пользовательский диалог «подтверждения» в JavaScript?

Я работал над проектом ASP.net, который использует настраиваемые «модальные диалоги». Я использую здесь кавычки. потому что я понимаю, что «модальный диалог» - это просто div в моем html-документе, который должен отображаться «поверх» остальной части документа, а не модальный диалог в истинном смысле этого слова.

В многие части на веб-сайте у меня есть код, который выглядит следующим образом:

var warning = 'Are you sure you want to do this?';
if (confirm(warning)) {
    // Do something
}
else {
    // Do something else
}

Это нормально, но было бы неплохо, чтобы диалоговое окно подтверждения соответствовало стилю остальной части страницы.

Однако, поскольку это неверно модальный диалог, я думаю, мне нужно написать что-то вроде этого: (в этом примере я использую jQuery-UI)

<div id='modal_dialog'>
    <div class='title'>
    </div>
    <input type='button' value='yes' id='btnYes' />
    <input type='button' value='no' id='btnNo' />
</div>

<script>
function DoSomethingDangerous() {
    var warning = 'Are you sure you want to do this?';
    $('.title').html(warning);
    var dialog = $('#modal_dialog').dialog();
    function Yes() {
        dialog.dialog('close');
        // Do something
    }   
    function No() {
        dialog.dialog('close');
        // Do something else
    }    
    $('#btnYes').click(Yes);
    $('#btnNo').click(No);
}

Это хороший способ выполнить то, что я хочу, или есть способ лучше?

29

javascript jquery jquery-ui dialog modal-dialog

задан Daniel Allen Langdon 3 August 2011 в 15:54

1 ответ

Другие вопросы по тегам:

javascript jquery jquery-ui dialog modal-dialog

Похожие вопросы:

score 0 · Answer 1

Для включения Вы для использования подтвердить поля как нормальное подтверждаете диалоговое окно, я использовал бы Обещания, которые позволят Вам ждать на результате результата и затем действовать на это, вместо того, чтобы иметь необходимость использовать обратные вызовы.

Это позволит Вам следовать за тем же шаблоном, у Вас есть в других частях Вашего кода с кодом такой как...

  const confirm = await ui.confirm('Are you sure you want to do this?');

  if(confirm){
    alert('yes clicked');
  } else{
    alert('no clicked');
  }

Видят codepen, например, или выполняют отрывок ниже.

https://codepen.io/larnott/pen/rNNQoNp

const ui = {
  confirm: async (message) => createConfirm(message)
}

const createConfirm = (message) => {
  return new Promise((complete, failed)=>{
    $('#confirmMessage').text(message)

    $('#confirmYes').off('click');
    $('#confirmNo').off('click');
    
    $('#confirmYes').on('click', ()=> { $('.confirm').hide(); complete(true); });
    $('#confirmNo').on('click', ()=> { $('.confirm').hide(); complete(false); });
    
    $('.confirm').show();
  });
}
                     
const saveForm = async () => {
  const confirm = await ui.confirm('Are you sure you want to do this?');
  
  if(confirm){
    alert('yes clicked');
  } else{
    alert('no clicked');
  }
}

body {
  margin: 0px;
  font-family: "Arial";
}

.example {
  padding: 20px;
}

input[type=button] {
  padding: 5px 10px;
  margin: 10px 5px;
  border-radius: 5px;
  cursor: pointer;
  background: #ddd;
  border: 1px solid #ccc;
}
input[type=button]:hover {
  background: #ccc;
}

.confirm {
  display: none;
}
.confirm > div:first-of-type {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0px;
  left: 0px;
}
.confirm > div:last-of-type {
  padding: 10px 20px;
  background: white;
  position: absolute;
  width: auto;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  border: 1px solid #333;
}
.confirm > div:last-of-type div:first-of-type {
  min-width: 150px;
  padding: 10px;
}
.confirm > div:last-of-type div:last-of-type {
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="example">
  <input type="button" onclick="saveForm()" value="Save" />
</div>

<!-- Hidden confirm markup somewhere at the bottom of page -->

<div class="confirm">
  <div></div>
  <div>
    <div id="confirmMessage"></div>
    <div>
      <input id="confirmYes" type="button" value="Yes" />
      <input id="confirmNo" type="button" value="No" />
    </div>
  </div>
</div>