Question

我有一个带有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？

Answer 1

您是否尝试直接获取...如果ID是唯一的..这应该适用于您的情况

 var modalWindow = $("#ModalPopupExtender1]");
 ......

Answer 2

你可以利用jQuery的兄弟选择器。
由于Panel呈现为div，它就在您点击的div旁边。

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

或者在css和div上添加一些panel课程，您可以使用以下jquery

     $(".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

Answer 3

您应该能够通过在没有JQuery的情况下调用以下内容来找到控件。

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

使用JQuery

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

或

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

Answer 4

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

Answer 5

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

function (e) {

            var ModalPopupExtender1= $(this).closest('tr').find('#<%=ModalPopupExtender1.ClientID %>');
            e.preventDefault();
        });

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

5 个答案:

编辑-1

的jQuery

编辑2