Aprire una modal popup tramite JavaScript
Ecco un esempio di come controllare l'apertura o la chiusura di un ModalPopupExtender di AjaxControlToolkit tramite JavaScript in ASP.net.
Il controllo ModalPopupExtender richiede, per il suo funzionamento, un pulsante (btnModal) definito nella proprietà TargetControlID, che posso decidere di non visualizzare (non ho definito la proprietà Text).
Poi devo specificare, nella proprietà PopupcontrolID, il panel che conterrà la mia finestra modal e infine nella proprietà CancelControlID definisco quale pulsante all'interno del panel controlla la chiusura dello stesso.
Quà sotto le funzioni JavaScript per controllare l'apertura e la chiusura del popup
Il controllo ModalPopupExtender richiede, per il suo funzionamento, un pulsante (btnModal) definito nella proprietà TargetControlID, che posso decidere di non visualizzare (non ho definito la proprietà Text).
Poi devo specificare, nella proprietà PopupcontrolID, il panel che conterrà la mia finestra modal e infine nella proprietà CancelControlID definisco quale pulsante all'interno del panel controlla la chiusura dello stesso.
XML
<%@ Control Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!-- button hide -->
<asp:LinkButton ID="btnModal" runat="server" />
<asp:modalpopupextender id="mpeModal" runat="server"
BehaviorID="mpeModalBehaviorID"
TargetControlID="btnModal"
CancelControlID="btnCancel"
PopupcontrolID="pnlModal"
backgroundcssclass="modalPopup">
</asp:modalpopupextender>
<!-- modal popup contrelled by modalpopupextender -->
<asp:Panel ID="pnlModal" runat="server" style="display: none" CssClass="modalPopup">
<h3>Modal</h3>
<span id="text">Hello</span>
<div class="button">
<asp:Button ID="btnCancel" Text="Cancel" runat="server" />
</div>
</asp:Panel>
Quà sotto le funzioni JavaScript per controllare l'apertura e la chiusura del popup
JavaScript
<script type="text/javascript">
function OpenPopup() {
var modal= $find('mpeModalBehaviorID');
modal.show();
}
function ClosePopup() {
var modal= $find('mpeModalBehaviorID');
modal.hide();
}
</script>