0

我有一个带有 ModalPopupExtender 控件的 DataList。当我单击 datalist 中的 div 时，显示 ModalPopupExtender 。

<asp:DataList ID="AdsDataList" runat="server" RepeatColumns="4" 
               RepeatDirection="Horizontal">
   <ItemTemplate>
     <div class="Detail_Content" id="detailcontact" runat="server" 
          onclick="return OpenPopup();">
        <label><%# Eval("Name") %></label>
     </div>
     <asp:Panel ID="Panel2" runat="server" Style="display: none;">
         <div class="popup_block" style="width: 550px;left:30%;top:100px">
              <label><%# Eval("FatherCategoryName")                                
         </div>
     </asp:Panel>
        <cc1:ModalPopupExtender runat="server" ID="ModalPopupExtender1" 
             TargetControlID="detailcontact" PopupControlID="Panel2" 
             PopupDragHandleControlID="header" DropShadow="false" 
             RepositionMode="RepositionOnWindowResizeAndScroll" X="400" Y="130" 
             BackgroundCssClass="modalBackground"CancelControlID="btnclose1" />
   </ItemTemplate>
</asp:DataList>

我想，当用户点击背景时，隐藏 ModalPopupExtender 。

我使用这个 jquery 代码。但找不到 ModalPopupExtender 。

var modalWindow = $("[id*=AdsDataList] [id*=ModalPopupExtender1]");

和

$find('#<%= AdsDataList.FindControl("ModalPopupExtender1").ClientID %>');

但得到错误

'你调用的对象是空的。'

如何使用 jquery 查找 Datalist 控件的 clientID？

4

5 回答 5

0

您应该能够通过在没有 JQuery 的情况下调用以下命令来定位控件。

var dataListControl = document.getElementById('<%:AdsDataList.ClientID%>')

使用 jQuery

var dataListControl = $find('<%:AdsDataList.ClientID%>')

或者

var dataListControl = $('<%: AdsDataList.ClientID%>')
于 2013-03-04T06:33:40.027 回答
0

单击 datalist 中的任何模板时使用此代码

function (e) {

            var ModalPopupExtender1= $(this).closest('tr').find('#<%=ModalPopupExtender1.ClientID %>');
            e.preventDefault();
        });
于 2013-03-04T07:34:11.823 回答
0

您是否尝试过直接获取它...如果 id 是唯一的..这在您的情况下应该有效

 var modalWindow = $("#ModalPopupExtender1]");
 ......
于 2013-03-04T05:50:37.620 回答
0

您可以利用 jQuery 的兄弟选择器。
就像Panel渲染一样，它就在你点击div的旁边。div

   function OpenPopup() {
       $(this).next("div").show();
   }

或者在你的and上放一些css类，你可以使用 jquery，如下所示divpanel

     $(".divClass").click(function() {
        $(this).next("div.pannelclass").show();
   });

其中 .divClass 是您的 cssclass div，pannelclass也是您面板的 cssclass。

jQuery 选择器详细信息
http://api.jquery.com/next/

编辑-1

<ItemTemplate>
 <div class="Detail_Content" id="detailcontact" runat="server" >
    <label><%# Eval("Name") %></label>
 </div>
 <asp:Panel ID="Panel2" CssClass='panelclass' runat="server" Style="display: none;">
     <div class="popup_block" style="width: 550px;left:30%;top:100px">
          <label><%# Eval("FatherCategoryName")                                
     </div>
 </asp:Panel>
    <cc1:ModalPopupExtender runat="server" ID="ModalPopupExtender1" 
         TargetControlID="detailcontact" PopupControlID="Panel2" 
         PopupDragHandleControlID="header" DropShadow="false" 
         RepositionMode="RepositionOnWindowResizeAndScroll" X="400" Y="130" 
         BackgroundCssClass="modalBackground"CancelControlID="btnclose1" />
 </ItemTemplate>
</asp:DataList>

jQuery

   $(".Detail_Content").click(function(event) {
        $(this).next("div.panelclass").show();
        event.preventDefault()
        return false;
   });

编辑 2

隐藏模型弹出窗口的链接

http://www.codeproject.com/Articles/165083/Tips-Tricks-Hide-popup-on-background-click
http://forums.asp.net/t/1369095.aspx/1

于 2013-03-04T05:58:10.670 回答
0 
   try this....if model id is unique

   var model =  $("[id$=ModalPopupExtender1]")

    or if not unique then use...

    OpenPopup(this) ...

    function (ob)
    {
    var e = $(this).parent().find("div#ModalPopupExtender1");
    }
于 2013-03-04T06:39:28.427 回答