jQuery UI：ユーザーが確認またはキャンセルするダイアログを表示します。

私のサイトには、ユーザーがその1つをクリックしたときにモーダルダイアログを表示する必要のあるリンクがいくつかあります。モーダルには、You are now leaving the "SECTION NAME" part of "SITE NAME"のようなメッセージが含まれます。ユーザーは、ユーザーが要求を続行できるようにするものを受け入れるか、またはユーザーを元に戻すために取り消すかのいずれかを受け入れます。jQuery UI：ユーザーが確認またはキャンセルするダイアログを表示します。

リンクの例は次のようになります。あなたがleaving-sectionのクラスは、私が上で指定しているものを行うためのリンクを引き起こす見ることができ、また、新しいタブ/ウィンドウでリンクを開きますよう<a href="/interests" title="My Interests" target="_blank" class="leaving-section">My Interests</a>

しかし、ユーザはまず、彼らがサイトの別の部分に運ばれていることを認識していることに同意する必要があります。

私はドキュメントを見てきましたが、a）ダイアログを非表示にしてdivを表示するのではなく、b）ユーザーが確認して元の場所に送信できるようにするつまり、クリックしたURLです。

これは私がこれまで持っているものです。

$("#leaving-section").dialog({ 
      resizable: false, 
      modal: true, 
      buttons: { 
       "I understand, take me there": function() { 
        $(this).dialog("close"); 
       }, 
       "I want to stay where I am": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

     $('.leaving-section').click(function (event) 
     { 
      event.preventDefault(); 
      var $dialog = $('#leaving-section'); 
      $dialog.dialog('open'); 
     });

しかし、私が代わりにページに埋め込まれているdiv要素のjQueryのによって作成されるモーダルにしたいです！また、最初のボタンを元の宛先に送信するにはどうすればよいですか？

お手数をおかけしていただきありがとうございます。おかげ

出典

2011-08-02 Cameron

質問するには？ – Matt

どのようにしてダイアログボックスを表示して、ユーザーが元のURLに同意して送信したりキャンセルしたり、その場所にとどまることができるようにしますか？ – Cameron

キャンセルは簡単です。モーダルで定義するだけです。しかし、あなたはそれを定義しますが、window.locationやlocation.hrefのようなものを使用します。 – Matt

を使用することができますポストで提案されているように私は同じ問題を解決しなければなりませんでした。これを機能させるための鍵は、確認機能を使用するリンクのclickイベントハンドラ（複数のリンクに使用する場合）でdialogを部分的に初期化する必要があることです。これは、リンクのターゲット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>

は、私はあなたが（私の例では、confirmLink）CSSクラスを使用してリンクを生成することができれば、これは、あなたのために働くだろうと信じています。

出典

2011-08-02 09:34:52