JQuery 模式中的 ASP.NET 控件答案

【问题标题】：ASP.NET control in JQuery modalJQuery 模式中的 ASP.NET 控件
【发布时间】：2010-09-23 17:43:44
【问题描述】：

好的，我是 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'}); 
});

我想知道如何在模态框激活之前更改“litModal”控件的值。

【问题讨论】：

张贴一个 HTML 方面的样本可能会有所帮助。你的解释有点难以理解。

标签： jquery controls asp.net-3.5

【解决方案1】：

好的，所以您的 <p> 中有一个文字。这意味着您没有直接的选择器/句柄，就像当它是带有 ID 的标签时一样。

但是你可以说它是<div class="modal-content">里面的<p>，都是ID为landing-page-modal的元素的一部分：

"#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;
});

【讨论】：

【解决方案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'}); });

注意：我假设您每页只有一个。如果没有，那么您需要弄清楚如何引用适用于相关链接的特定模式。

【讨论】：