Как создать диалог с кнопками "Ок" и "Отмена"

Вам нужно использовать window.confirm для реализации функционала подтверждения действия пользователя. Вот пример кода, который делает именно это:

var answer = window.confirm("Сохранить данные?");
if (answer) {
    // код для сохранения данных
} else {
    // код для других действий
}

Этот подход является самым простым способом достижения нужного вам результата.

Вы можете использовать встроенный JavaScript (inline JavaScript) в обработчике события onclick, как показано в вашем примере. Ваш код будет выглядеть следующим образом:

<form action="http://www.google.com/search">
  <input type="text" name="q" />
  <input type="submit" value="Go" 
    onclick="return confirm('Вы уверены, что хотите выполнить поиск в Google?');" 
  />
</form>

В этом коде при нажатии на кнопку "Go" срабатывает функция confirm(), которая показывает диалоговое окно с вопросом. Если пользователь нажимает "ОК", форма отправляется, и выполняется поиск в Google. Если пользователь нажимает "Отмена", форма не отправляется. Это позволяет вам подтвердить действие перед осуществлением поиска.

Если вам нужно создать собственный confirmBox, то имейте в виду, что стандартная функция confirm в JavaScript не позволяет изменять текст или стили кнопок диалогового окна. Вот пример того, как вы можете реализовать свой собственный confirmBox с использованием jQuery и чистого JavaScript.

jQuery confirmBox

Сначала рассмотрим реализацию с использованием jQuery:

function doConfirm(msg, yesFn, noFn) {
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function() {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

// Пример использования
doConfirm("Вы уверены?", function yes() {
    alert('Да');
}, function no() {
    alert('Нет');
});

HTML-код для confirmBox будет выглядеть так:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="confirmBox" style="display:none;">
    <div class="message"></div>
    <span class="yes">Да</span>
    <span class="no">Нет</span>
</div>

Чистый JavaScript confirmBox

Если вы предпочитаете использовать чистый JavaScript, вот аналогичный пример:

function doSomething() {
    document.getElementById('id_confrmdiv').style.display = "block";

    document.getElementById('id_truebtn').onclick = function() {
        alert('Да');
        document.getElementById('id_confrmdiv').style.display = "none"; // Закрытие confirmBox
    };
    document.getElementById('id_falsebtn').onclick = function() {
        alert('Нет');
        document.getElementById('id_confrmdiv').style.display = "none"; // Закрытие confirmBox
        return false;
    };
}

HTML-код для confirmBox в чистом JavaScript:

<style>
body { font-family: sans-serif; }

#id_confrmdiv {
    display: none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
}

#id_confrmdiv button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 80px;
    cursor: pointer;
}

#id_confrmdiv button:hover {
    background-color: #ddd;
}

#confirmBox .message {
    text-align: left;
    margin-bottom: 8px;
}
</style>

<div id="id_confrmdiv">Подтверждение
    <button id="id_truebtn">Да</button>
    <button id="id_falsebtn">Нет</button>
</div>

<button onclick="doSomething()">Отправить</button>

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

Вот полностью адаптивное решение с использованием чистого JavaScript, которое создает диалоговое окно с кнопками "Ok" и "Cancel". Вы можете посмотреть, как это реализовано ниже:

JavaScript

// Вызов функции при нажатии кнопки показа диалога
document.getElementById("btn-show-dialog").onclick = function() {
    show_dialog();
};
var overlayme = document.getElementById("dialog-container");

function show_dialog() {
    /* Функция для отображения окна диалога */
    overlayme.style.display = "block";
}

// Если нажата кнопка "подтвердить", выполняется функция confirm()
document.getElementById("confirm").onclick = function() {
    confirm();
};
function confirm() {
    /* Код, выполняемый при нажатии "подтвердить" */   
    overlayme.style.display = "none";
}

// Если нажата кнопка "отмена", выполняется функция cancel()
document.getElementById("cancel").onclick = function() {
    cancel();
};
function cancel() {
    /* Код, выполняемый при нажатии "отмена" */  
    overlayme.style.display = "none";
}

CSS

.popup {
  width: 80%;
  padding: 15px;
  left: 0;
  margin-left: 5%;
  border: 1px solid rgb(1,82,73);
  border-radius: 10px;
  color: rgb(1,82,73);
  background: white;
  position: absolute;
  top: 15%;
  box-shadow: 5px 5px 5px #000;
  z-index: 10001;
  font-weight: 700;
  text-align: center;
}

.overlay {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.85);
  z-index: 10000;
  display: none;
}

@media (min-width: 768px) {
  .popup {
    width: 66.66666666%;
    margin-left: 16.666666%;
  }
}
@media (min-width: 992px) {
  .popup {
    width: 80%;
    margin-left: 25%;
  }
}
@media (min-width: 1200px) {
  .popup {
    width: 33.33333%;
    margin-left: 33.33333%;
  }
}

.dialog-btn {
  background-color: #44B78B;
  color: white;
  font-weight: 700;
  border: 1px solid #44B78B;
  border-radius: 10px;
  height: 30px;
  width: 30%;
}
.dialog-btn:hover {
  background-color: #015249;
  cursor: pointer;
}

HTML

<div id="content_1" class="content_dialog">
    <p>Lorem ipsum dolor sit amet. Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit.</p>
    <p>Aliquam erat volutpat. Maecenas non tortor nulla, non malesuada velit. Nullam felis tellus, tristique nec egestas in, luctus sed diam. Suspendisse potenti.</p>
</div>

<button id="btn-show-dialog">Ok</button>

<div class="overlay" id="dialog-container">
  <div class="popup">
    <p>This will be saved. Continue?</p>
    <div class="text-right">
      <button class="dialog-btn btn-cancel" id="cancel">Cancel</button>
      <button class="dialog-btn btn-primary" id="confirm">Ok</button>
    </div>
  </div>
</div>

Объяснение

В этом примере мы создаем простое диалоговое окно, которое можно открыть с помощью кнопки. При нажатии на кнопку "Ok" или "Cancel", диалоговое окно закрывается. Это решение полностью адаптивно и будет хорошо выглядеть на различных размерах экранов благодаря медиа-запросам в CSS.

Вы можете перехватить событие onSubmit, используя JavaScript. Затем вызовите подтверждающее уведомление и получите результат.

Вот пример кода:

document.getElementById('myForm').onsubmit = function(event) {
    event.preventDefault(); // Отменяем стандартное поведение формы

    var confirmation = confirm("Вы уверены, что хотите отправить форму?");
    
    if (confirmation) {
        // Если пользователь подтвердил, отправляем форму
        this.submit();
    }
};

В этом примере мы предотвращаем стандартное поведение формы с помощью event.preventDefault(), потом показываем уведомление с помощью confirm(). Если пользователь нажимает "ОК", форма отправляется, иначе отправка отменяется.