使用javascript創建gridview圖像onclick

我有一個gridview，並有一個圖像列。它工作沒有問題，但我需要更多東西。我想讓點擊的圖像更大並且讓屏幕專注於它。其實我現在所做的是在圖像不在gridview中時做這件事，但就像我說我需要gridview中的圖像。這裏是我的CSS（我想寫我的CSS也因爲它使聚焦）：使用javascript創建gridview圖像onclick

#overlay { 
     position: fixed; 
     width: 100%; 
     height: 100%; 
     top: 0px; 
     left: 0px; 
     background-color: #000; 
     opacity: 0.7; 
     filter: alpha(opacity = 70) !important; 
     display: none; 
     z-index: 100; 
    } 

    #overlayContent { 
     position: fixed; 
     width: 100%; 
     top: 100px; 
     text-align: center; 
     display: none; 
     overflow: hidden; 
     z-index: 100; 
    } 

    #contentGallery { 
     margin: 0px auto; 
    } 

    #imgBig, #imgSmall { 
     cursor: pointer; 
    }

我的GridView：

<asp:GridView ID="GridViewEvents" CssClass="mGrid" AutoGenerateColumns="false" runat="server" DataSourceID="EntityDataSourceEvents"> 
    <Columns> 
     <asp:TemplateField HeaderText="Araç"> 
      <ItemTemplate> 
       <%#GetPlate(Convert.ToInt16(Eval("CarId"))) %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Sürücü"> 
      <ItemTemplate> 
       <%#GetDriverId(Convert.ToInt16(Eval("DriverId"))) %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Alış KM"> 
      <ItemTemplate> 
       <div id="overlayContent"> 
        <img id="imgBig" src="" alt="" /> 
       </div> 
       <div id="grid"> 
        <img id="imgSmall" onclick="Tiklandi()" alt="" src='<%#Eval("FirstKmImage") %>' /> 
       </div> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="İade KM"> 
      <ItemTemplate> 
       <asp:Image ID="ImageLast" ImageUrl='<%#Eval("LastKmImage") %>' runat="server" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Alış Tarih"> 
      <ItemTemplate> 
       <%#Eval("FirstDate") %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="İade Tarih"> 
      <ItemTemplate> 
       <%#Eval("LastDate") %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="Güzergah"> 
      <ItemTemplate> 
       <%#Eval("Guzergah") %> 
      </ItemTemplate> 
     </asp:TemplateField> 
     <asp:TemplateField HeaderText="İş Durumu"> 
      <ItemTemplate> 
       <%#IsDurumu(Convert.ToBoolean(Eval("Done")))%> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView>

我的js代碼：

function Tiklandi() { 
     $("#imgBig").attr("src", $(this).prop('src')); 
     $("#overlay").show('slow'); 
     $("#overlayContent").show('slow'); 
    }

哪有我讓我的js代碼在gridview中創建這種類型的進程？

來源

2016-04-11 Batuhan Ozdal

可能是您可以在<img>元素上添加班級。

<asp:Image ID="ImageLast" ImageUrl='<%#Eval("LastKmImage") %>' runat="server" class="Tiklandi" />

而且click事件處理程序綁定到類

$('.Tiklandi').click(function() { 
     $("#imgBig").attr("src", $(this).prop('src')); 
     $("#overlay").show('slow'); 
     $("#overlayContent").show('slow'); 
    })

希望這可以幫助。

來源

2016-04-11 06:46:10

謝謝您的回覆，但不幸的是它沒有工作 –

請確保您將事件處理程序放在'$（document）.ready'內，並且我建議您不要將'overlayContent'放在'asp：GridView'內，因爲它會被創建多次數據編號。 –

使用javascript創建gridview圖像onclick

回答

相關問題