jquery - web2.0 ポップアップ?

Question

私が必要としているサイトでは、ユーザーが外部の Web サイトに移動するリンクをクリックするときに、ユーザーのチェックが必要です (理由は聞かないでください。そうなっているだけです..)

クライアントは、「本当に行きたいですか?」というメッセージを表示するポップアップボックスを求めています。はいまたはいいえの 2 つのボタンと一緒に。

JSがオフになっている場合、計画のahrefリンクを残すだけで非常に優雅に劣化するため、これまでのところ、クラシックブラウザのポップアップでこれらすべてを行ってきました。私の質問は...これを行う別の方法で、普通のくだらないポップアップよりも少しファンキーなものはありますか?

私はthickboxといくつかのJQueryスライダーを試してきましたが、Javascriptを無効にするとすぐに

a) 「ポップアップ」がない b) 機能しなくなった「ポップアップ」をアクティブにするために必要なマークアップのおかげで、リンクでさえ本来あるべき場所を指していない

アイデアや考えはありますか？:P

score 1 · Accepted Answer

利用可能な多くのオプションを考えると、jQuery UI のダイアログコンポーネントを選択します。

score 0 · Accepted Answer

jQueryを使用しているページでこれを行うように要求され、次のことを思いつきました。

jQuery( function () {
  jQuery( '#warn-dialog' )
    .dialog({
      autoOpen: false,
      modal: true,
      buttons : { 
        'Yes' : function () { 
          document.location.href = jQuery( '#email-link' ).attr( 'href' );
        },
        'No' : function () { 
          jQuery( '#warn-dialog' ).dialog( 'close' ); 
        }
      }
    });
  jQuery( '.warn-link' ).click( function ( event ) {
    event.preventDefault();
    jQuery( '#warn-dialog' ).dialog( 'open' );
  });
});

次のようなHTMLの場合：

<div id="warn-dialog" class="ui-helper-hidden" title="Warning">
  <p>Are you sure you want to leave?</p>
</div>

<p>
  <a class="warn-link" href="http://link1.com">link1</a>
  <a class="warn-link" href="http://link2.com">link2</a>
</p>

score 0 · Accepted Answer

答えは、シックボックスを使用することでした：

<a href="http://www.whatever.com" onclick="tb_show('Warning', 'ajax.html?height=300&width=440', 'thickbox');return false">

次に、ajax.html (または何でも) を取得して表示できます。ボタンを使用してシックボックスを閉じたい場合は、次を追加します。

<a href="#" onclick="tb_remove()">

jquery - web2.0 ポップアップ?

4 に答える 4

Related

Reference