JQueryモーダルのASP.NETコントロール

Question

OK、私はJQueryを初めて使用します。asp：Literalコントロールを含むモーダルがあります。リテラルは、モーダルをアクティブにするためにクリックされるリンクによって制御されます。ですから、リンクのonClickにリテラル値を与えるのと同じくらい簡単であることを望んでいましたが、そうではありません。

私は願っています：リテラルの値はページの読み込み時に設定されるので、更新パネルに入れて、リンクがクリックされたときに変更されるようにします。

または、JavaScriptのように、JQuery onClickを使用してリテラルの値を動的に設定する必要があります。

ご協力ありがとうございます。

更新

モーダルのHTMLは次のとおりです。

<div class="modal-holder" id="landing-page-modal" style="display:none">
  <div class="modal">
    <div class="modal-t">
      <a href="#" class="modal-close">
        <img src="images/modal-close.gif" border="0" alt="" />
      </a>
      <div class="modal-scroll">
        <a href="#" class="modal-top-arrow">
          <img src="images/modal-arr-t.gif" alt="" />
        </a>
        <a href="#" class="modal-bottom-arrow">
          <img src="images/modal-arr-b.gif" alt="" />
        </a>
      </div>
      <div class="modal-b">
        <div class="modal-content">
          <h2><asp:Label ID="lblModal" Text="Title" runat="server" /></h2>
          <p>
            <asp:Literal ID="litModal" Text="Test Data Lives Here For Now" runat="server" />
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

リンクがクリックされたときにモーダルをアクティブにするJQueryは次のとおりです。

$('.article a, #menu a, #features a').click(function(){
  $('.modal-holder').css({'display': 'block'});
  return false;
});

$('.modal-close').click(function(){ 
  $('.modal-holder').css({'display': 'none'}); 
});

<！> quot; litModal <！> quot;の値を変更する方法を知りたいアクティブになる前のモーダル内のコントロール。

Answer 1

さて、<p>にリテラルがあります。つまり、IDを持つラベルであった場合のように、直接セレクター/ハンドルがありません。

ただし、<div class="modal-content">内のlanding-page-modal、つまりIDが<=>の要素のすべての部分であると言うことができます：

"#landing-page-modal div.modal-content p"

だから、すべてを見えるようにする関数を変更する必要があります：

$('.article a, #menu a, #features a').click( function(clickTarget){
  // set the text of the <p> to whatever you like. I took 
  // the text of the element that was clicked by the user.
  $('#landing-page-modal div.modal-content p').text( $(clickTarget).text() ); 

  // now make the whole thing visible
  $('#landing-page-modal').css({'display': 'block'});
  return false;
});

Answer 2

リンクがクリックされたときにモーダルでクライアント側を変更する場合は、リンクのonClickハンドラーでモーダルを設定する必要があります。モーダルテキストは、クリックされたアンカータグに基づいていると仮定します。 litModalはクライアント側のスパンに変わるので、そのようにします。

    $('.article a, #menu a, #features a').click(function(anchor){
             var val = jQuery(anchor).text();
            // modify val as needed
            $('span#litModal').text(  val );
            $('.modal-holder').css({'display': 'block'});
            return false;
    });
    $('.modal-close').click(function(){ $('.modal-holder').css({'display': 'none'}); });

注：ページごとにこれらのいずれか1つだけを持っていると仮定しています。そうでない場合は、問題のリンクに適用される特定のモーダルを参照する方法を理解する必要があります。