Jquery UIダイアログに「確認」ダイアログを実装する方法は?


148

醜いjavascript:alert()ボックスを置き換えるためにJQuery UIダイアログを使用しようとしています。私のシナリオでは、アイテムのリストがあり、それらの各個人の隣に、各アイテムの[削除]ボタンがあります。擬似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!
}

OK、ここに問題があります。初期化時間中、ダイアログには誰(アイテム)が起動するのか、またアイテムID(!)もわかりません。これらの確認ボタンの動作を設定して、ユーザーがまだ[はい]を選択した場合、リンクをクリックして削除する方法を教えてください。


ここにそれを行うための使いやすいプラグインがあります:stackoverflow.com/questions/6457750/form-confirm-before-submit

1
Looooongが解決策を検索: stackoverflow.com/a/18474005/1876355
Pierre

回答:


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

これにより、UpdatePanel内で完全なポストバックが発生することに他の誰かが気付いていますか?どのように修正しますか?
ホーマー

3
この回答と@lloydphillipsの回答には、私にはまったく役に立たないものがあります。元の質問は「削除」ボタン(リンク)に関するものです。一般に、状態を変更する操作(DELETEなど)にリンク(HTTP GET)を使用することはお勧めできません。これらの回答はどちらも、ユーザーがJavaScriptを有効にしていることを前提としています。JavaScriptが無効になっている場合、リンクが起動し、削除(またはその他の)操作が確認なしで起動します。これは壊滅的な場合があります。私はこの問題を扱った答えを見つけたいと思っていました。
エコー

@エコー:私は同じことについて考えました。それを適切にするには、JSが無効になっているかどうかの確認を求める別のページが必要だと思います。JSの場合、このページは省略できます。おそらく、confirmed = trueなどの別のgetパラメータを使用します。JSがある場合とない場合を考慮に入れるのは本当に難しくて面倒です。Web開発はめちゃくちゃです。
robsch 2012年

1
@sreeもちろん。IDの名前をパラメーターとして使用する関数を抽出し、jQuery呼び出しを行って、渡されたIDのイベントハンドラーをセットアップできます。
Paul Morie

59

Paulの回答は、ダイアログがクリックイベントでインスタンス化された後のオプションの設定方法が正しくなかったため、うまく機能しませんでした。これが機能していた私のコードです。私はポールの例に合うようにそれを調整しませんでした、しかしそれはいくつかの要素の名前が異なっているという点で猫のひげの違いだけです。あなたはそれを解決できるはずです。修正は、クリックイベントのボタンのダイアログオプションのセッターにあります。

$(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
あなたのしたことは、ポールの答えとは違っていたとは思いません。
Grant Birchmeier、2012

2
は、私にはよく見えますよ。フィールドがjQuery-api.jquery.com/ononclick
Aaron Newton

1
「猫のウィスカの違い」-もっとそのフレーズを使用する必要があります。
Chad Gorshing 2014年

27

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

続ける。


これは良い解決策です。私がajax urlの取得とクイック表示に使用するものとよく似ています... function JQueryDialog(url){$( "#dialog")。remove(); $( "body")。append( "<div id = 'dialog' title = 'www.mysite.com'> </ div>"); $( "#dialog")。load(url).dialog({resizable:false、width:770、height:470、modal:true、buttons:{"Close":function(){$(this).dialog( "閉じる"); $( "#dialog")。remove();}}}); }
conners

6

私が試しただけで機能するシンプルで短いソリューション

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

次に、class = "confirm"をリンクに追加するだけで機能します。


.textメッセージは「Sure?」はい/いいえ、OK /キャンセルの選択肢はありません。ユーザーが「確実」か「わからない」かをどのように示しますか?
元気

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ネイティブメカニズムが引き継ぎ、期待どおりに動作します。もう1つの利点は、ボタンやハイパーリンクに使用できることです。私は十分に明確であったと思います。


投稿の編集を検討し、このソリューションを好む理由をコミュニティに伝えてください。何があなたにとってそれを良くするのですか?
Fuzzical Logic

投稿を編集しました。私はそれが今より理にかなっていると思います。私がそれを書いたとき、それはコメントの必要が全くなかったように非常に明確に見えました。しばらくしてから再訪したときの違いは... :)
BineG

非常にクリーンなソリューションとして最適です!これまでにイベントの名前空間について読んだことはありません。それをありがとう!
griffla 2012

BEAAUUTIFULLL!「しかし、元のボタンで同じネイティブjqueryイベント(クリック)をトリガーするには..」が美しいようです。 ありがとう $("#btn").trigger("click.confirmed");
Irf 2016年

4

私はこれが古い質問であることを知っていますが、これはMVC4でHTML5 データ属性を使用する私の解決策です:

<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部分は使用しませんでしたが、サーバーサイドMVC(PHP / Symfony2)によって生成されたURLで動作します。
2013

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

この返信をありがとう。私はそれをテストするだろうと確信しています(それでも機能しているように見えます)。ここで私が多くの回答から見た問題の1つは、一般性の欠如です。ページに確認が必要な別のコントロールのセット(またはリンクなど)がある場合、相互作用/アクションに関する複数の宣言が必要なようです。古いJavaScriptの方法、つまりhref = "javascript:confirm( 'link_url');" シンプルでエレガントで、すべての類似のケースに適しています。もちろん、JavaScriptメソッドは非常に煩わしいため、JavaScriptを使用していない人はリンクを完全に見逃します。素晴らしい返信をもう一度ありがとう。
xandy 2009年

3

上記のように。以前の投稿は私を正しい軌道に乗せました。これが私がやった方法です。アイデアは、テーブルのすべての行の横に画像を配置することです(データベースからPHPスクリプトによって生成されます)。画像がクリックされると、ユーザーは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メソッドを使用して実際にアクションを実行することです。


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

(2016年3月22日の時点では、リンク先のページでのダウンロードは機能しません。すばらしいプラグインであるために開発者がいつか修正する場合に備えて、リンクをここに残します。元の投稿は次のとおりです。An代わりに、実際に機能するリンク:jquery.confirm

ニーズに対して単純すぎるかもしれませんが、このjQuery確認プラグインを試すことができます。使い方は非常に簡単で、多くの場合に機能します。


リンクにより、リンクされたプロファイルにアクセスできます。プレミアムリンクインメンバーでない限り、プラグインを表示できないようです。
Zane

リンクを更新して、再び機能するようにしました。開発者は、古いリンクをLinkedInプロフィールにリダイレクトする必要があります。彼女が再度変更した場合は、「jquery confirm plugin nadia」を使用してググるだけです。
grahamesd 2014年

ありがとう!私はすでに自分のバージョンをすでに実装していますが、まだ見ています。
Zane

リンクが再び死んでいる
Valamas

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>

1

私は自分でこれに遭遇し、解決策になりました。これは、ここでのいくつかの回答に似ていますが、実装方法が少し異なります。私はJavaScriptの多くの部分、またはどこかにプレースホルダーdivが好きではありませんでした。私は汎用的なソリューションを望んでいました。それを使用するたびにJavaScriptを追加せずにHTMLで使用できるようにしました。これが私が思いついたものです(これには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>

タイトル属性はdivコンテンツに使用されるので、ユーザーはボタンにカーソルを合わせると確認の質問を受け取ることもできます(タイルのタイトル属性を使用しなかったのはこのためです)。確認ウィンドウのタイトルは、altタグの内容です。javascript snipは一般化された.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の回答は、Homerとechoによって強調された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」であり、2つの異なる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グリッドビュー(コマンドでのグリッドビューコントロールのビルド)内のリンクボタンで使用するためにこれを探していたので、ダイアログの「確認」アクションは、実行時にグリッドビューコントロールによって生成されたスクリプトをアクティブにする必要があります。これは私のために働きました:

 $(".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 2013年

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>

jQueryを使用したASP.Net MVC。
フレデリックサムソン

0

非常に人気のあるトピックとグーグルは、「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 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


-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があることを確認してください


これは、私が長年目にしてきた最も醜いコードの1つです。非推奨の属性(などLANGUAGE="JavaScript")を使用し、大文字と小文字を混在させ、プレーンなJSコードをjQueryコードと完全に不必要に混合し、CSSの代わりにJSを使用してスタイルを設定します(醜く、意味的に正しくありません)。変更(プレーンJSを使用)は、元の質問に関してはまったく関係ありません。コードは必ず短くして美しくし、元の質問への回答に集中する必要があります。
Sk8erPeter 2013年

-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 2013
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.