Как реализовать диалог подтверждения в диалоге Jquery UI?


148

Я пытаюсь использовать JQuery UI Dialog, чтобы заменить уродливое javascript:alert()поле. В моем сценарии у меня есть список элементов, и рядом с каждым из них у меня будет кнопка «удалить» для каждого из них. настройка psuedo html будет выглядеть следующим образом:

<ul>
    <li>ITEM <a href="url/to/remove"> <span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
    <li>ITEM <a href="url/to/remove"><span>$itemId</span>
</ul>

<div id="confirmDialog">Are you sure?</div>

В части JQ, когда документ готов, я сначала настроил бы div на модальное диалоговое окно с необходимой кнопкой, а затем установил те «a», чтобы вызвать подтверждение перед удалением, например:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

ОК, вот в чем проблема. во время инициализации диалог не будет знать, кто (элемент) запустит его, а также идентификатор элемента (!). Как я могу настроить поведение этих кнопок подтверждения, чтобы, если пользователь все еще выбирал ДА, он перешел по ссылке, чтобы удалить его?


Есть простой в использовании плагин, чтобы сделать это здесь: stackoverflow.com/questions/6457750/form-confirm-before-submit

1
Looooong искал решение: stackoverflow.com/a/18474005/1876355
Пьер

Ответы:


166

Я просто должен был решить ту же проблему. Ключом к тому, чтобы заставить это работать, было то, что он dialogдолжен быть частично инициализирован в clickобработчике событий для ссылки, с которой вы хотите использовать функцию подтверждения (если вы хотите использовать это для более чем одной ссылки). Это связано с тем, что целевой URL для ссылки должен быть вставлен в обработчик событий для нажатия кнопки подтверждения. Я использовал класс CSS, чтобы указать, какие ссылки должны иметь подтверждающее поведение.

Вот мое решение, абстрагированное, чтобы подойти для примера.

<div id="dialog" title="Confirmation Required">
  Are you sure about this?
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

    $("#dialog").dialog({
      buttons : {
        "Confirm" : function() {
          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>

Я считаю, что это будет работать для вас, если вы можете создавать свои ссылки с помощью класса CSS ( confirmLinkв моем примере).

Вот jsfiddle с кодом в нем.

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


2
+1 почти работает ... но посмотрите ответ @lloydphillips для исправления
rohancragg

Кто-нибудь еще замечает, что это приведет к полному PostBack внутри UpdatePanel? Как вы это исправите?
Гомер

3
В этом ответе и ответах @lloydphillips есть кое-что, что просто не делает это для меня. Исходный вопрос относится к кнопке «удалить» (ссылка). В общем случае нежелательно использовать ссылку (HTTP GET) для операции, которая изменяет состояние (например, DELETE). Оба этих ответа предполагают, что у пользователя включен JavaScript. Если javascript отключен, ссылки сработают, и операция удаления (или любого другого) сработает без подтверждения, что может привести к катастрофическим последствиям. Я надеялся найти ответ, который касался этой проблемы.
эхо

@echo: я думал о том же. Чтобы сделать это правильно, я думаю, что должна быть другая страница, которая запрашивает подтверждение, если JS отключен. Если JS эта страница может быть опущена. Может быть, с помощью другого параметра get, как подтверждено = true. Действительно тяжело и громоздко принимать во внимание случаи с JS и без него. Веб-разработка - это бардак.
robsch

1
@ Конечно. Вы можете извлечь функцию, которая взяла имя идентификатора, чтобы использовать его в качестве параметра, и сделала вызовы jQuery, чтобы установить обработчики событий для переданного идентификатора.
Пол Мори

59

Я обнаружил, что ответ Пола не совсем сработал, поскольку способ, которым он устанавливал параметры ПОСЛЕ диалогового окна при событии click, был неверным. Вот мой код, который работал. Я не адаптировал его под пример Пола, но разница только в том, что некоторые элементы названы по-разному. Вы должны быть в состоянии решить это. Коррекция находится в установщике опции диалога для кнопок на событии щелчка.

$(document).ready(function() {

    $("#dialog").dialog({
        modal: true,
        bgiframe: true,
        width: 500,
        height: 200,
        autoOpen: false
    });


    $(".lb").click(function(e) {

        e.preventDefault();
        var theHREF = $(this).attr("href");

        $("#dialog").dialog('option', 'buttons', {
            "Confirm" : function() {
                window.location.href = theHREF;
            },
            "Cancel" : function() {
                $(this).dialog("close");
            }
        });

        $("#dialog").dialog("open");

    });

});

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


1
Я не вижу, что ты сделал, это отличалось от ответа Пола.
Грант Бирчмейер,

2
Выглядит хорошо для меня. Единственное, что я бы посоветовал, это использовать onвместо click, так как это будет продолжать работать, если (например) поле будет перерисовано с использованием jQuery - api.jquery.com/on
Аарон Ньютон

1
хах "разница кошачьих усов" - мне нужно больше использовать эту фразу.
Чад Горшинг

27

Я создал свою собственную функцию для диалога подтверждения пользовательского интерфейса jquery. Вот код

function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
  $('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
    draggable: false,
    modal: true,
    resizable: false,
    width: 'auto',
    title: dialogTitle || 'Confirm',
    minHeight: 75,
    buttons: {
      OK: function () {
        if (typeof (okFunc) == 'function') {
          setTimeout(okFunc, 50);
        }
        $(this).dialog('destroy');
      },
      Cancel: function () {
        if (typeof (cancelFunc) == 'function') {
          setTimeout(cancelFunc, 50);
        }
        $(this).dialog('destroy');
      }
    }
  });
}

Теперь, чтобы использовать это в своем коде, просто напишите следующее

myConfirm('Do you want to delete this record ?', function () {
    alert('You clicked OK');
  }, function () {
    alert('You clicked Cancel');
  },
  'Confirm Delete'
);

Продолжай.


Это хорошее решение, оно очень похоже на мое, которое я использую для получения URL-адреса ajax и быстрого отображения ... function JQueryDialog (url) {$ ("# dialog"). Remove (); $ ("body"). append ("<div id = 'dialog' title = 'www.mysite.com'> </ div>"); $ ("# dialog"). load (url) .dialog ({resizable: false, ширина: 770, высота: 470, modal: true, кнопки: {"Close": function () {$ (this) .dialog ( "close"); $ ("# dialog"). remove ();}}}); }
conners

6

Простое и короткое решение, которое я только что попробовал, и оно работает

  $('.confirm').click(function() {
    $(this).removeClass('confirm');
    $(this).text("Sure?");
    $(this).unbind();
    return false;
  });

тогда просто добавьте class = "подтвердите" к вашей ссылке, и это работает!


Сообщение .text спрашивает "Sure?" но не дает выбор да / нет, хорошо / отменить. Как пользователь указывает, «уверен» он или нет?
Генки

6

Это моё решение .. надеюсь, оно кому-нибудь поможет. Она написана на лету, а не копировалась, так что прости меня за любые ошибки.

$("#btn").on("click", function(ev){
    ev.preventDefault();

    dialog.dialog("open");

    dialog.find(".btnConfirm").on("click", function(){
        // trigger click under different namespace so 
        // click handler will not be triggered but native
        // functionality is preserved
        $("#btn").trigger("click.confirmed");
    }
    dialog.find(".btnCancel").on("click", function(){
        dialog.dialog("close");
    }
});

Лично я предпочитаю это решение :)

редактировать: извините .. я действительно должен был объяснить это более подробно. Мне это нравится, потому что, на мой взгляд, это элегантное решение. Когда пользователь нажимает кнопку, которая должна быть подтверждена первой, событие отменяется, как и должно быть. Когда нажата кнопка подтверждения, решение состоит не в том, чтобы смоделировать щелчок по ссылке, а в том, чтобы вызвать то же самое собственное событие jquery (щелчок) для исходной кнопки, которая сработала бы, если бы не было диалогового окна подтверждения. Единственным отличием является другое пространство имен событий (в данном случае «подтверждено»), поэтому диалоговое окно подтверждения больше не отображается. Собственный механизм Jquery может затем вступить во владение, и все может работать как ожидалось. Еще одним преимуществом является то, что он может быть использован для кнопок и гиперссылок. Я надеюсь, что я был достаточно ясен.


Вы можете отредактировать свой пост и сообщить сообществу, почему вы предпочитаете это решение. Что делает это лучше для вас?
Fuzzical Logic

Я редактировал пост. Надеюсь, теперь это имеет больше смысла. Когда я писал это, мне казалось, что комментарии не нужны. Какая разница, когда я вернулся через некоторое время ... :)
BineG

Отличное и очень чистое решение! Никогда не читайте о пространствах имен событий раньше. Спасибо за это!
Griffla

BEAAUUTIFULLL! "... но вызвать то же самое собственное событие jquery (щелчок) на исходной кнопке .." звучит красиво !! Спасибо за $("#btn").trigger("click.confirmed");
Ирф

4

Я знаю, что это старый вопрос, но вот мое решение с использованием атрибутов данных HTML5 в MVC4:

<div id="dialog" title="Confirmation Required" data-url="@Url.Action("UndoAllPendingChanges", "Home")">
  Are you sure about this?
</div>

JS код:

$("#dialog").dialog({
    modal: true,              
    autoOpen: false,
    buttons: {
        "Confirm": function () {
            window.location.href = $(this).data('url');
        },
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$("#TheIdOfMyButton").click(function (e) {
    e.preventDefault();
    $("#dialog").dialog("open");
});

Мне нравится это решение, спасибо. Легко понять и работает для меня. Я не использовал часть @ Url.Action, но она работает с URL-адресом, сгенерированным моим серверным MVC (PHP / Symfony2).
Фази

3

Будет ли это делать?

$("ul li a").click(function(e) {
  e.preventDefault();
  $('#confirmDialog').show();

  var delete_path = $(this).attr('href');

  $('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link 
                                            //  is not the  only way you can
                                            //  close your dialog
  $('#confirmDialog a.ok').click(function(e) {
     e.preventDefault();
     window.location.href = delete_path;
  });

});

$('#confirmDialog a.cancel').click(function(e) {
   e.preventDefault();
   $('#confirmDialog').hide();
   $('#confirmDialog a.ok').unbind('click');
});

Спасибо за этот ответ. Я уверен, что я проверю это (и все же это выглядит функциональным). Одна из проблем, которые я видел по многим ответам здесь, - это отсутствие общности. Если на странице есть другой набор элементов управления (или ссылок и т. Д.), Который требует подтверждения, кажется, нам нужно многократное объявление о взаимодействии / действии. Старый способ javascript, т.е. href = "javascript: verify ('link_url');" прост и элегантен и подходит для всех подобных случаев. Конечно, метод javascript слишком навязчив, чтобы люди без javascript могли полностью пропустить ссылку. Еще раз спасибо за отличный ответ.
xandy

3

Как указано выше. Предыдущие посты вывели меня на правильный путь. Вот как я это сделал. Идея состоит в том, чтобы рядом с каждой строкой таблицы было изображение (генерируемое скриптом PHP из базы данных). При нажатии на изображение пользователь перенаправляется на URL-адрес, и в результате соответствующая запись удаляется из базы данных, показывая некоторые данные, относящиеся к нажатой записи, в диалоге пользовательского интерфейса jQuery.

Код JavaScript:

$(document).ready(function () {
  $("#confirmDelete").dialog({
    modal: true,
    bgiframe: true,
    autoOpen: false
  });
});

function confirmDelete(username, id) {
  var delUrl = "/users/delete/" + id;
  $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
  $('#confirmDelete').dialog('option', 'buttons', {
    "No": function () {
      $(this).dialog("close");
    },
    "Yes": function () {
      window.location.href = delUrl;
    }
  });
  $('#confirmDelete').dialog('open');
}

Диалог div:

<div id="confirmDelete" title="Delete User?"></div> 

Ссылка на изображение:

<img src="img/delete.png" alt="Delete User" onclick="confirmDelete('<?=$username;?>','<?=$id;?>');"/>

Таким образом, вы можете передать значения цикла PHP в диалоговое окно. Единственным недостатком является использование метода GET для фактического выполнения действия.


2

Как насчет этого:

$("ul li a").click(function() {

el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
                             draggable:true,
                             modal: true,
                             buttons: { "Ok": function() {
                                el.parent().remove();
                                $(this).dialog("close"); } }
                           });
$("#confirmDialog").dialog("open");

return false;
});

Я проверил это в этом HTML:

<ul>
<li><a href="#">Hi 1</a></li>
<li><a href="#">Hi 2</a></li>
<li><a href="#">Hi 3</a></li>
<li><a href="#">Hi 4</a></li>
</ul>

Он удаляет весь элемент li, вы можете адаптировать его под свои нужды.


2

(По состоянию на 22.03.2016 загрузка на странице, на которую указывает ссылка, не работает. Я оставляю ссылку здесь на случай, если разработчик исправит ее в какой-то момент, потому что это отличный маленький плагин. Оригинальный пост следует. альтернатива, и ссылка, которая действительно работает: jquery.confirm .)

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


Ссылка ведет меня к связанному профилю. Кажется, вы не можете видеть плагин, если вы не являетесь премиум-членом.
Зейн

Я обновил ссылку, чтобы она снова заработала. Разработчик должен перенаправить старую ссылку на свой профиль LinkedIn. Если она снова изменит его, просто гуглите его, используя «jquery Подтвердить плагин Надя»
grahamesd

Спасибо! Хотя я уже реализовал свою версию, я все равно посмотрю.
Зейн

ссылка снова мертва
Valamas

1

Как бы мне не хотелось использовать eval, мне показалось, что это самый простой способ, не вызывающий много проблем в зависимости от различных обстоятельств. Похоже на функцию времени ожидания javascript.

<a href="#" onclick="javascript:confirm('do_function(params)');">Confirm</a>
<div id="dialog-confirm" title="Confirm" style="display:none;">
    <p>Are you sure you want to do this?</p>
</div>
<script>
function confirm(callback){
    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:140,
        modal: false,
        buttons: {
            "Ok": function() {
                $( this ).dialog( "close" );
                eval(callback)
            },
            Cancel: function() {
                $( this ).dialog( "close" );
                return false;
            }
        }
    });
}

function do_function(params){
    console.log('approved');
}
</script>

1

Я сам столкнулся с этим и получил решение, которое похоже на несколько ответов, но реализовано несколько иначе. Мне не нравилось много кусочков JavaScript или местный тег div. Я хотел обобщенное решение, которое затем можно было бы использовать в HTML без добавления JavaScript для каждого использования. Вот что я придумал (для этого требуется jquery ui):

Javascript:

$(function() {

  $("a.confirm").button().click(function(e) {

    e.preventDefault();

    var target = $(this).attr("href");
    var content = $(this).attr("title");
    var title = $(this).attr("alt");

    $('<div>' + content + '</div>'). dialog({
      draggable: false,
      modal: true,
      resizable: false,
      width: 'auto',
      title: title,
      buttons: {
        "Confirm": function() {
          window.location.href = target;
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });

  });

});

Кроме того, в HTML не требуется никаких вызовов или ссылок на JavaScript:

<a href="http://www.google.com/"
   class="confirm"
   alt="Confirm test"
   title="Are you sure?">Test</a>

Поскольку атрибут title используется для содержимого div, пользователь может даже получить вопрос подтверждения, наведя курсор на кнопку (именно поэтому я не использовал атрибут title для плитки). Заголовок окна подтверждения является содержимым тега alt. Фрагмент javascript можно включить в обобщенный файл .js, и просто применив класс, у вас появится симпатичное окно подтверждения.


0
$("ul li a").live('click', function (e) {
            e.preventDefault();

            $('<div></div>').appendTo('body')
                    .html('<div><h6>Are you sure about this?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', modal: true, resizable: false,
                        buttons: {
                            Confirm: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");

                                window.location.reload();
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        Cancel: function (event, ui) {
                            $(this).remove();
                        }
                    });

            return false;
        });

0

ПРИМЕЧАНИЕ. Недостаточно повторений, чтобы комментировать, но ответ BineG отлично подходит для решения проблем обратной передачи на страницах ASPX, как это подчеркивали Гомер и Эхо. В честь, вот вариант с использованием динамического диалога.

$('#submit-button').bind('click', function(ev) {
    var $btn = $(this);
    ev.preventDefault();
    $("<div />").html("Are you sure?").dialog({
        modal: true,
        title: "Confirmation",
        buttons: [{
            text: "Ok",
            click: function() {
                $btn.trigger("click.confirmed");
                $(this).dialog("close");
            }
        }, {
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }
        }]
    }).show();  
});

0

Другой вариант вышеупомянутого, где он проверяет, является ли элемент управления «asp: linkbutton» или «asp: button», который визуализируется как два разных html-элемента управления. Кажется, работает хорошо для меня, но не проверял это экстенсивно.

        $(document).on("click", ".confirm", function (e) {
            e.preventDefault();
            var btn = $(this);
            $("#dialog").dialog('option', 'buttons', {
                "Confirm": function () {
                    if (btn.is("input")) {                            
                        var name = btn.attr("name");
                        __doPostBack(name, '')
                    }
                    else {
                        var href = btn.attr("href");
                        window.location.href = href;
                    }
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            });

            $("#dialog").dialog("open");
        });

0

Я искал это для использования на кнопках ссылок в ASP.NET Gridview (сборка элемента управления GridView в командах). Поэтому действие «Подтвердить» в диалоговом окне должно активировать сценарий, сгенерированный элементом управления Gridview во время выполнения. это сработало для меня:

 $(".DeleteBtnClass").click(function (e) {
     e.preventDefault();
     var inlineFunction = $(this).attr("href") + ";";
     $("#dialog").dialog({
         buttons: {
             "Yes": function () {
                 eval(inlineFunction); // eval() can be harmful!
             },
                 "No": function () {
                 $(this).dialog("close");
             }
         }
     });
 });

eval () может быть вредным! Кстати, я должен процитировать эту часть вашего кода: var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction);это не имеет никакого смысла!
Sk8erPeter

0

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

$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
  var conBox = confirm("Are you sure ?");
    if(conBox){ 
        // Do what you have to do
    }
    else
        return;
});

Я надеюсь тебе это понравится :)


0

Лично я вижу это как повторяющееся требование во многих представлениях многих приложений ASP.Net MVC.

Вот почему я определил класс модели и частичное представление:

using Resources;

namespace YourNamespace.Models
{
  public class SyConfirmationDialogModel
  {
    public SyConfirmationDialogModel()
    {
      this.DialogId = "dlgconfirm";
      this.DialogTitle = Global.LblTitleConfirm;
      this.UrlAttribute = "href";
      this.ButtonConfirmText = Global.LblButtonConfirm;
      this.ButtonCancelText = Global.LblButtonCancel;
    }

    public string DialogId { get; set; }
    public string DialogTitle { get; set; }
    public string DialogMessage { get; set; }
    public string JQueryClickSelector { get; set; }
    public string UrlAttribute { get; set; }
    public string ButtonConfirmText { get; set; }
    public string ButtonCancelText { get; set; }
  }
}

И мой частичный взгляд:

@using YourNamespace.Models;

@model SyConfirmationDialogModel

<div id="@Model.DialogId" title="@Model.DialogTitle">
  @Model.DialogMessage
</div>

<script type="text/javascript">
  $(function() {
    $("#@Model.DialogId").dialog({
      autoOpen: false,
      modal: true
    });

    $("@Model.JQueryClickSelector").click(function (e) {
      e.preventDefault();
      var sTargetUrl = $(this).attr("@Model.UrlAttribute");

      $("#@Model.DialogId").dialog({
        buttons: {
          "@Model.ButtonConfirmText": function () {
            window.location.href = sTargetUrl;
          },  
          "@Model.ButtonCancelText": function () {
            $(this).dialog("close");
          }
        }
      });

      $("#@Model.DialogId").dialog("open");
    });
  });
</script>

И затем, каждый раз, когда вам это нужно в представлении, вы просто используете @ Html.Partial (он делал это в скриптах разделов, чтобы определить JQuery):

@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})

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

<a title="Delete" class="SyLinkDelete" href="/UserDefinedList/DeleteEntry?Params">
    <img class="SyImageDelete" alt="Delete" src="/Images/DeleteHS.png" border="0">
</a>

ASP.Net MVC с jQuery.
Фредерик Самсон

0

Очень популярная тема, и Google находит это для запроса "jquery диалог закрыть, какое событие было нажато". Мое решение правильно обрабатывает события YES, NO, ESC_KEY, X. Я хочу, чтобы моя функция обратного вызова вызывалась независимо от расположения диалога.

function dialog_YES_NO(sTitle, txt, fn) {
    $("#dialog-main").dialog({
        title: sTitle,
        resizable: true,
        //height:140,
        modal: true,
        open: function() { $(this).data("retval", false); $(this).text(txt); },
        close: function(evt) {
            var arg1 = $(this).data("retval")==true;
            setTimeout(function() { fn(arg1); }, 30);
        },
        buttons: {
            "Yes": function() { $(this).data("retval", true); $(this).dialog("close"); },
            "No": function()  { $(this).data("retval", false); $(this).dialog("close"); }
        }
    });
}
- - - - 
dialog_YES_NO("Confirm Delete", "Delete xyz item?", function(status) {
   alert("Dialog retval is " + status);
});

Легко перенаправить браузер на новый URL-адрес или выполнить что-то еще в функции retval.


0

Здесь так много хороших ответов;) Вот мой подход. Похоже на использование eval ().

function functionExecutor(functionName, args){
    functionName.apply(this, args);
}

function showConfirmationDialog(html, functionYes, fYesArgs){
    $('#dialog').html(html);
    $('#dialog').dialog({
        buttons : [
            {
                text:'YES',
                click: function(){
                    functionExecutor(functionYes, fYesArgs);
                    $(this).dialog("close");
                },
                class:'green'
            },
            {
                text:'CANCEL',
                click: function() {
                    $(this).dialog("close");
                },
                class:'red'
            }
        ]
    });     
}

И использование выглядит так:

function myTestYesFunction(arg1, arg2){
    alert("You clicked YES:"+arg1+arg2);
}

function toDoOrNotToDo(){
    showConfirmationDialog("Dialog text", myTestYesFunction, ['My arg 1','My arg 2']);
}

0

Из коробки пользовательский интерфейс JQuery предлагает следующее решение:

$( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );

HTML

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;">
 </span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

Вы можете дополнительно настроить его, указав имя для функции JQuery и передав текст / заголовок, который вы хотите отобразить в качестве параметра.

Ссылка: https://jqueryui.com/dialog/#modal-confirmation


-1

Ну, это ответ на ваши вопросы ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Santa Luisa</TITLE>
<style>
    body{margin:0;padding:0;background-color:#ffffff;}
    a:link {color:black;}    
a:visited {color:black;}  
a:hover {color:red;}  
a:active {color:red;}
</style>

</HEAD>
<body>

<link rel="stylesheet" href="jquery/themes/base/jquery.ui.all.css">
    <script src="jquery-1.4.4.js"></script>

    <script src="external/jquery.bgiframe-2.1.2.js"></script>
    <script src="ui/jquery.ui.core.js"></script>

    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.draggable.js"></script>
    <script src="ui/jquery.ui.position.js"></script>

    <script src="ui/jquery.ui.resizable.js"></script>
    <script src="ui/jquery.ui.dialog.js"></script>

    <link rel="stylesheet" href="demos.css">
    <script>
    var lastdel;
    $(function() {
        $( "#dialog" ).dialog({
            autoOpen: false,modal: true,closeOnEscape: true
        });

        $(".confirmLink").click(function(e) {
            e.preventDefault();
            var lastdel = $(this).attr("href");

        });


        $("#si").click( function() {
            $('#dialog').dialog('close');
            window.location.href =lastdel;

        });
        $("#no").click( function() {
            $('#dialog').dialog('close');
        });
    });

    </script>

<SCRIPT LANGUAGE="JavaScript">
<!--
        var currentimgx;
        var cimgoverx=200-6;
        var cimgoutx=200;


        function overbx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';


        currentimgx.style.width=cimgoverx+"px";
        currentimgx.style.height=cimgoverx+"px"; 

    }

    function outbx(obj){
        obj.style.borderTopWidth = '0px';   
        obj.style.borderLeftWidth = '0px';
        obj.style.borderRightWidth = '0px';
        obj.style.borderBottomWidth = '0px';

        currentimgx.style.width=cimgoutx+"px";
        currentimgx.style.height=cimgoutx+"px"; 
    }

function ifocusx(obj){
        color='#FF0000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';

    }

    function iblurx(obj){
        color='#000000';
        width='3px';
        obj.style.borderTopWidth = width;
        obj.style.borderTopColor =color;
        obj.style.borderTopStyle ='solid';

        obj.style.borderLeftWidth = width;
        obj.style.borderLeftColor =color;
        obj.style.borderLeftStyle ='solid';

        obj.style.borderRightWidth = width;
        obj.style.borderRightColor =color;
        obj.style.borderRightStyle ='solid';

        obj.style.borderBottomWidth = width;
        obj.style.borderBottomColor =color;
        obj.style.borderBottomStyle ='solid';
    }

    function cimgx(obj){
        currentimgx=obj;
    }


    function pause(millis){
    var date = new Date();
    var curDate = null;

    do { curDate = new Date(); }
    while(curDate-date < millis);
    } 


//-->
</SCRIPT>
<div id="dialog" title="CONFERMA L`AZIONE" style="text-align:center;">
    <p><FONT  COLOR="#000000" style="font-family:Arial;font-size:22px;font-style:bold;COLOR:red;">CONFERMA L`AZIONE:<BR>POSSO CANCELLARE<BR>QUESTA RIGA ?</FONT></p>

    <p><INPUT TYPE="submit" VALUE="SI" NAME="" id="si"> --><INPUT TYPE="submit" VALUE="NO" NAME="" id="no"></p>
</div>



<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="100%" height="100%">
<TR valign="top" align="center">
    <TD>
    <FONT COLOR="red" style="font-family:Arial;font-size:25px;font-style:bold;color:red;">Modifica/Dettagli:<font style="font-family:Arial;font-size:20px;font-style:bold;background-color:yellow;color:red;">&nbsp;298&nbsp;</font><font style="font-family:Arial;font-size:20px;font-style:bold;background-color:red;color:yellow;">dsadas&nbsp;sadsadas&nbsp;</font>&nbsp;</FONT>
    </TD>
</TR>

<tr valign="top">
    <td align="center">
        <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">
        <TR align="left">

            <TD>
                <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" WIDTH="">

                <TR align="left">
                    <TD>
                    <font style="font-sixe:30px;"><span style="color:red;">1</span></font><br><TABLE class="tabela" CELLSPACING="0" CELLPADDING="0" BORDER="1" WIDTH="800px"><TR style="color:white;background-color:black;"><TD align="center">DATA</TD><TD align="center">CODICE</TD><TD align="center">NOME/NOMI</TD><TD  align="center">TESTO</TD><td>&nbsp;</td><td>&nbsp;</td></TR><TR align="center"><TD>12/22/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=1';alert(lastdel);" class="confirmLink">Cancella</A></TD><TR align="center"><TD>22/10/2010&nbsp;</TD><TD>298&nbsp;</TD><TD>dfdsfsdfsf</TD><TD><A HREF="modificarigadiario.php?codice=298"  style="font-weight:bold;color:red;font-size:30px;">Modifica</A></TD><TD><A HREF="JavaScript:void(0);"  style="font-weight:bold;color:red;font-size:30px;" onclick="$('#dialog').dialog('open');$('#dialog').animate({ backgroundColor: '#aa0000', color: '#fff', width: 250 }, 2000);lastdel='cancellarighe.php?codice=298&id=2';alert(lastdel);" class="confirmLink">Cancella</A></TD></TABLE><font style="font-sixe:30px;"><span style="color:red;">1</span></font><br>

                    </TD>
                </TR>

                </TABLE>
            </TD>
        </TR>
        </TABLE>
    </td>
</tr>
</tbody></table>


</body>
</html>

убедитесь, что у вас есть jquery 1.4.4 и jquery.ui


Это один из самых уродливых кодов, которые я видел за последние годы. Вы используете устаревшие атрибуты (например LANGUAGE="JavaScript"), смешанные прописные и строчные символы, совершенно без необходимости смешиваете простые JS-коды с jQuery-кодами и устанавливаете стили с помощью JS вместо CSS (некрасиво и семантически неверно), и, кстати, ваш стиль модификация (с простым JS) абсолютно не имеет отношения к исходному вопросу. Вы должны определенно сократить и украсить свой код и сосредоточиться на ответе на оригинальный вопрос.
Sk8erPeter

-1

Простой способ с оттенком JavaScript

$("#myButton").click(function(event) {
    var cont = confirm('Continue?');
    if(cont) {
        // do stuff here if OK was clicked
        return true;
    }
    // If cancel was clicked button execution will be halted.
    event.preventDefault();
}

2
Цель заключалась в том, чтобы избегать использования стандартных функций javascript: предупреждение / подтверждение и т. Д., Так что это не решение вопроса.
Redreinard
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.