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の兄弟セレクターを利用できます。レンダリングと
同じように、クリックしているあなたのすぐ隣にあります。Paneldivdiv

   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

于 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 に答える
0

直接取得しようとしましたか... IDが一意の場合..これはあなたの場合にうまくいくはずです

 var modalWindow = $("#ModalPopupExtender1]");
 ......
于 2013-03-04T05:50:37.620 に答える
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

データリストのテンプレートをクリックするときにこのコードを使用します

function (e) {

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