Пользовательский диалог подтверждения в JS или JQuery

Question

У меня есть этот код JavaScript (KnockoutJS). У меня есть функция, которая в некоторых случаях запрашивает диалог подтверждения и возвращает ответ пользователя или "true", если ему вообще не нужно было выводить диалог.

Обычный диалог JS уродлив, и я хотел бы создать собственный диалог, но мне нужен своего рода модальный диалог, чтобы я мог получить ответ пользователя - я не хочу определять следующую операцию (что делать, если пользователь щелкает OK) в самом диалоге, потому что - как вы можете видеть в моем коде - я использую один и тот же диалог для многих различных функций, каждая из которых имеет свое поведение, поэтому каждый раз, когда следующая операция отличается.

 self.confirmDialog = function () {
       if (condition) {
           return (confirm("text text text"));
       }
       else {
             return true;
       }
  }


 self.doSomething1 = function () {
     if (self.confirmDialog ()) {
         // do something 1
     }
     // some code
 }
 self.doSomething2 = function () {
     // some code
     if (self.confirmDialog ()) {
         // do something 2
     }
 }
 self.doSomething3 = function () {
     if (self.confirmDialog ()) {
         // do something 3
     }
 }

Answer 1

Вы можете сделать это с помощью диалоговых окон jQuery UI. Посмотрите этот пример на модальных формах в официальной документации, полный исходный код находится внизу. По сути, вы создаете div с полями формы:

<div id="dialog-form" title="Create new user">
    <form>
        <fieldset>
            <label for="name">Name</label>
            <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
            <label for="email">Email</label>
            <input type="text" name="email" id="email" value="[e-mail]" class="text ui-widget-content ui-corner-all">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
        </fieldset>
    </form>
</div>

Затем вы можете открыть его как диалоговое окно jQuery UI и обработать данные формы в обратном вызове для кнопки отправки вашего диалога.

var dialog = $("#dialog-form").dialog({
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "Create an account": function() {
            // handle your form here
            var name = $("#name"),
            email = $("#email"),
            password = $("#password");

            var nameValue = name.val();
            //...
        },
        Cancel: function() {
            dialog.dialog( "close" );
        }
    }
});

Возвращаясь к макету вашего исходного кода, вы можете применить его так:

self.dialogOptions = {
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "Create an account": function() {
            self.acceptCallback();
        },
        Cancel: function() {
            dialog.dialog( "close" );
            self.cancelCallback();
        }
    }
}

self.doSomething1 = function () {
    self.acceptCallback = function() {
        // do something if the user accepts
    };
    self.cancelCallback = function() {
        // do something if the user cancels
    };

    $("#dialog-form").dialog(self.dialogOptions);
}
self.doSomething2 = function () {
    // do the same, setting different callbacks before opening the dialog
}

Если вам нужно что-то сделать независимо от того, принимает пользователь или нет, просто поместите код в функцию и вызовите его из обоих acceptCallback а также cancelCallback,

Answer 2

Попробуйте это сладкое предупреждение

Хороший интерфейс и многофункциональный