使用AjaxToolKit弹出窗口,而不是在asp.net Web应用程序中使用:PopUpExtender

时间:2018-06-01 12:04:01

标签: c# asp.net asp.net-ajax ajaxcontroltoolkit

我到目前为止所完成的工作是在下面,我尝试了堆栈溢出时可用的所有示例注意:我试图在点击图像映射区域时触发弹出窗口

ajaxToolkit:ModalPopupExtender

<ajaxToolkit:ModalPopupExtender ID="PropertyViewModalPopupExtender" runat="server"
  TargetControlID="AreasOfMapMasterPlan"
  PopupControlID="pnlPopUpPropertyView"
  CancelControlID="btnCancelPopUpViewProperty"></ajaxToolkit:ModalPopupExtender>

asp:ImageMap当点击地图上的区域时,必须出现当前没有出现的弹出式面板

<asp:ImageMap ID="AreasOfMapMasterPlan" OnClick="AreasOfMapMasterPlan_Click" runat="server"></asp:ImageMap>

弹出式面板

<asp:Panel ID="pnlPopUpPropertyView" runat="server" CssClass="modal" TabIndex="-1" data-keyboard="false" data-backdrop="static" style="background-color:#f2f2f2;vertical-align:middle;align-content:center;width:70%;height:400px;overflow:auto;">
  <div class="model-dialog modal-sm"></div>
  <div class="modal-content"></div>
  <div class="modal-header">
  <button class="close" data-dismiss="modal">&times;</button>
  <h4 class="modal-title"><asp:Label ID="Label1" runat="server" Text=""></asp:Label></h4></div>
<div class="model-body">
  <asp:GridView ID="GridView1" runat="server" Enabled="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
    <FooterStyle BackColor="White" ForeColor="#000066" />
    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
    <RowStyle ForeColor="#000066" />
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#007DBB" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#00547E" />
  </asp:GridView>
</div>
<div class="modal-footer">
  <asp:Button ID="btnCancelPopUpViewProperty" CssClass="btn btn-primary" runat="server" Text="Cancel" />
  </div>
 </asp:Panel>

1 个答案:

答案 0 :(得分:1)

在Panel

之后添加一个LinkBut​​ton
....
   </div>
 </asp:Panel>
 <asp:LinkButton ID="lnkFake" runat="server"  CssClass="hidden" />
ModalPopupExtender中的

将TargetControlID更改为“LinkFake”

 <ajaxToolkit:ModalPopupExtender ID="PropertyViewModalPopupExtender" 
runat="server" TargetControlID="lnkFake" PopupControlID="pnlPopUpPropertyView"   

Linkbutton可以被CSS隐藏 在你的代码隐藏中用

显示面板
 ...
 PropertyViewModalPopupExtender.Show()
 ....