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

Я хотел бы создать функцию JavaScript, похожую наconfirm(), который показывает диалог (div с вопросом и 2 кнопками) и возвращаетtrue если пользователь нажимает «ОК» илиfalse иначе

Можно ли это сделать с помощью JavaScript / jQuery, нобе плагины (например, jQuery UI или Dialog)? Потому что я пытаюсь уменьшить размер и время поездки туда и обратно ...

Я пытался написать этот код, но я не знаю, как заставить функцию «ждать» щелчка пользователя.

Я хотел бы использовать свою функцию таким образом:

answer=myConfirm("Are you sure?")

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

 Brad Barrow31 мая 2012 г., 06:44
Событие щелчка на кнопках «да» и «нет» должно быть переопределено / переопределено для каждого экземпляра всплывающего окна. Если вы определяете их только один раз, событие click не может вернуть логическое значение самому последнему экземпляру. Это цель обратного вызова, чтобы дать кнопкам «да / нет» контекст для действия.
 David Thomas31 мая 2012 г., 00:14
Возможно, интерес:window.showModalDialog().
 Sam Dufel31 мая 2012 г., 00:15
Вы действительно должны реализовать пользовательское диалоговое окно подтверждения с обратным вызовом. Вы отображаете диалоговое окно, и функция обратного вызова вызывается, когда пользователь нажимает кнопку.

Ответы на вопрос(3)

чтобы ждать ввода пользователя и затем возвращаться из функции, в JavaScript более распространено предоставление функции обратного вызова, которая будет вызываться после завершения ожидаемого действия. Например

myCustomConfirm("Are you sure?", function (confirmed) {
    if (confirmed) {
        // Whatever you need to do if they clicked confirm
    } else {
        // Whatever you need to do if they clicked cancel
    }
});

Это можно реализовать по принципу:

function myCustomConfirm(message, callback) {
    var confirmButton, cancelButton;

    // Create user interface, display message, etc.

    confirmButton.onclick = function() { callback(true); };
    cancelButton.onclick = function() { callback(false); };
}
 supergiox31 мая 2012 г., 01:02
Спасибо за ответ. Я редактировал вопрос
 georgebrock31 мая 2012 г., 07:28
@ supergiox: Вы все еще можете использовать описанную мной функцию в разных контекстах. Единственная разница - вместо того, чтобы писатьif (myConfirm(msg)) { … } else { … } каждый раз, когда ты им пользуешься, ты пишешьmyConfirm(msg, function (c) { if (c) { … } else { … } });
 Victor Ferreira04 дек. 2013 г., 20:53
Спасибо, это работает. мы даже можем создать функцию для отображения большего количества кнопок. используйте 0 и 1 как false и true по умолчанию и другие числа для различных опций.

JQueryUI? И используйте Диалог работает следующим образом:

как часть 2:

HTML

<div id="dialog-confirm" title="ALERT">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Are you sure?</p>
</div>

@ Scri

$( "#dialog-confirm" ).dialog({
    resizable: false,
    modal: true,
    buttons: {
        "OK": function() {
            $( this ).dialog( "close" );
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

Все в сценарии:

$(function() {
    $("<div />").attr("id", "dialog-confirm").append(
        $("<p />").text('Are you sure?').css("text-align", "center").prepend(
            $("<span />").addClass("ui-icon ui-icon-alert").css({
                float: 'left',
                margin: '0 7px 20px 0'
            })
        )
    ).dialog({
        resizable: false,
        modal: true,
        title: "ALERT",
        buttons: {
            "OK": function() {
                answer=1;
                $(this).dialog("close");
            },
            "Cancel": function() {
                answer=0;
                $(this).dialog("close");
            }
        }
    });
});

JsFiddle

 SpYk3HH31 мая 2012 г., 01:04
Вы используете jquery, но хотите "чистый javascript" ... который с тех пор просто не получается? Если речь идет о памяти, jqueryui - это очень легкое расширение jquery, но если это серверная память, ну ... это все еще очень маленький уменьшенный файл.
 supergiox31 мая 2012 г., 01:01
Я хочу сэкономить как можно больше места. Если не будет "чистого" способа javascript, я буду использовать ваше решение

е к тому, что вам нужно - это использовать модель публикации и подписки с некоторыми пользовательскими событиями.

Для этого:

Когда пользователь нажимает кнопку «Да», запускает пользовательское событие clickedYes. Сделайте то же самое для "нет"

$('#yesbtn').click(function(){
    $(document).trigger('clickedYes');
});

$('#nobtn').click(function(){
    $(document).trigger('clickedNo');
});

Теперь нам нужно «прослушать» или подписаться на эти события и выполнить соответствующее действие в контексте.

Давайте создадим гипотетическую ситуацию: Ваш пользователь нажимает кнопку «Удалить», и вы хотите подтвердить этот выбор.

Сначала настройте то, что вы хотите, если они нажмут Да:

$(document).unbind('clickedYes'); //Unbind any old actions
$(document).bind('clickedYes',function(){
    //Code to delete the item
    //Hide the popup
});

то, что вы хотите, если они нажмут нет:

$(document).unbind('clickedNo'); //Unbind any old actions
$(document).bind('clickedNo',function(){
    //Hide the popup and don't delete
});

Итак, мы настроили действия, которые прослушивают clickedYes или clickedNo. Теперь нам просто нужно показать пользователям всплывающее окно, чтобы они нажимали «да» или «нет». Когда они это сделают, они вызовут события выше.

ваша функция myConfirm () просто сделает следующее:

function myConfirm(msg){
    //change the message to 'msg'
    //Show the popup
}

Так что порядок будет:

Связать триггеры для пользовательских событий с кнопками да и нет Перед запросом - отмените все старые действия и прикрепите новые. Представьте пользователю всплывающее окно, которое заставит его вызвать ваши действия.

Это позволит вам вызывать такую функцию myConfirm («Вы уверены»); Это не совсем то, что вы ищете ... но я не думаю, что можно делать именно то, что вы хотите.

 supergiox31 мая 2012 г., 01:01
Я редактировал вопрос

Ваш ответ на вопрос