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

134

Я пытаюсь использовать 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!
}

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

Теги:
modal-dialog
dialog

23 ответа

151
Лучший ответ

Мне просто пришлось решить ту же проблему. Ключ к тому, чтобы это сработало, заключалось в том, что 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 для исправления
  • 0
    Кто-нибудь еще замечает, что это приведет к полному PostBack внутри UpdatePanel? Как вы это исправите?
Показать ещё 6 комментариев
56

Я понял, что ответ Пол не совсем сработал, поскольку способ, которым он устанавливал параметры ПОСЛЕ того, как диалог был создан при событии 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
    Выглядит хорошо для меня. Единственное , что я бы sugest было бы использовать on вместо click , так как это будет продолжать работать , если (например) поле перерисовывается с помощью JQuery - api.jquery.com/on
Показать ещё 1 комментарий
25

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

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'
);

Продолжайте.

  • 0
    Это хорошее решение, оно очень похоже на мое, которое я использую для получения 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 ();}}}); }
6

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

$("#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 native может взять на себя, и все может работать как ожидалось. Другим преимуществом является то, что он может использоваться для кнопок и гиперссылок. Надеюсь, я был достаточно ясным.

  • 0
    Вы можете отредактировать свой пост и сообщить сообществу, почему вы предпочитаете это решение. Что делает это лучше для вас?
  • 0
    Я редактировал пост. Надеюсь, теперь это имеет больше смысла. Когда я писал это, мне казалось, что комментарии не нужны. Какая разница, когда я вернулся через некоторое время ... :)
Показать ещё 2 комментария
6

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

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

затем просто добавьте class= "confirm" к вашей ссылке, и она будет работать!

  • 0
    Сообщение .text спрашивает "Sure?" но не дает выбор да / нет, хорошо / отменить. Как пользователь указывает, «уверен» он или нет?
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");
});
  • 0
    Мне нравится это решение, спасибо. Легко понять и работает для меня. Я не использовал часть @ Url.Action, но она работает с URL, сгенерированным моим серверным MVC (PHP / Symfony2).
3

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

Код 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 для фактического выполнения действия.

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');
});
  • 0
    Спасибо за этот ответ. Я уверен, что я проверю это (и все же это выглядит функциональным). Одна из проблем, которую я видел по многим ответам здесь, - это отсутствие общности. Если на странице есть другой набор элементов управления (или ссылок и т. Д.), Который требует подтверждения, кажется, нам нужно многократное объявление о взаимодействии / действии. Старый способ javascript, т.е. href = "javascript: Подтвердить ('link_url');" прост и элегантен и подходит для всех подобных случаев. Конечно, метод javascript слишком навязчив, чтобы люди без javascript могли полностью пропустить ссылку. Еще раз спасибо за отличный ответ.
  • 0
    +1: приятное нововведение. слишком грустно его не ненавязчивый :(
2

(Начиная с 03/22/2016, загрузка на связанную страницу не работает. Я оставляю ссылку здесь, если разработчик исправляет ее в какой-то момент, потому что это отличный маленький плагин. Далее, альтернатива и ссылка, которая действительно работает: jquery.confirm.)

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

  • 0
    Ссылка приводит меня к связанному профилю. Кажется, вы не можете видеть плагин, если вы не являетесь премиум-членом.
  • 0
    Я обновил ссылку, чтобы она снова заработала. Разработчик должен перенаправить старую ссылку на свой профиль LinkedIn. Если она изменяет это снова, тогда просто гуглите это, используя "jquery подтверждение плагина nadia".
Показать ещё 3 комментария
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, вы можете адаптировать его под свои нужды.

1

Я столкнулся с этим сам и получил решение, которое похоже на несколько ответов здесь, но реализовано несколько иначе. Мне не понравилось много фрагментов javascript или где-нибудь где-нибудь. Я хотел получить обобщенное решение, которое затем можно было бы использовать в 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 include, и просто, применяя класс, у вас есть довольно окно подтверждения.

1

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

<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>
0

Из коробки JQuery UI предлагает это решение:

$( 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

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

Очень популярная тема и google находит это для запроса "jquery dialog close, какое событие было нажато". Мое решение правильно обрабатывает ДА, НЕТ, 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

Лично я рассматриваю это как повторяющееся требование во многих представлениях многих приложений 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>
  • 1
    Что это за хрень ? .o0
  • 0
    ASP.Net MVC с помощью jQuery.
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: 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

Простой способ с помощью 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: предупреждение / подтверждение и т. Д., Так что это не решение вопроса.
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.NET Gridview (сборка GridView Control в командах) Таким образом, действие "Подтвердить" в диалоговом окне должно активировать script, сгенерированный элементом управления 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");
             }
         }
     });
 });
  • 0
    eval () может быть вредным! Кстати, я должен процитировать эту часть вашего кода: var inlineFunction = $(this).attr("href") + ";"; /* ... */ eval(inlineFunction); Это не имеет смысла вообще!
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;
        });
-2

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

<!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.ui.all.css">
    <script src="/jquery-1.4.4.js"></script>

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

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

    <script src="/jquery.ui.resizable.js"></script>
    <script src="/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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню