Monday, 11 December 2017

Create AJAX Modal

On the page:

<style>
  .modalPopup
  {
    background-color: #FFFFFF;
    border-width: 3px;
    border-style: solid;
    border-color: black;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    min-width: 300px;
    min-height: 120px;
  }
</style> 

<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
<cc1:ModalPopupExtender 
    ID="ModalPopupExtender1" 
    BehaviorID="mpe" 
    runat="server"
PopupControlID="pnlPopup" 
    TargetControlID="lnkDummy" 
    BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>

<asp:Panel 
    ID="pnlPopup" 
    runat="server" 
    CssClass="modalPopup" 
    Style="display: none; 
    overflow:auto; 
    max-height: 600px;">
  <div>
    <b runat="server" 
       id="modalHeader" 
       style="font-weight:600; 
       font-size:18px;">
    </b>
  </div>

  <hr />

  <div>
<div runat="server" 
       id="modalContent" 
       style="font-size: 14px"> 
    </div>

    <br /> <br />
    <asp:Button ID="btnHide" 
            runat="server" 
            Text="OK" 
            OnClientClick="return HideModalPopup()" />

    <br /> <br />
  </div>
</asp:Panel>

<script type="text/javascript">
  function ShowModalPopup() {
$find("mpe").show();
return false;
}
function HideModalPopup() {
$find("mpe").hide();
return false;
}
</script>



Call from code behind:

public void DisplayMessage(string header, string body)
{
modalHeader.InnerHtml = header;
modalContent.InnerHtml = body;
  ModalPopupExtender1.Show();
}

No comments:

SQL: Generate a range of numbers

SELECT ones.n + 10*tens.n + 100*hundreds.n + 1000*thousands.n FROM       (VALUES(0),(1),(2),(3),(4),(5),(6),(7),(8),(9)) ones(n),      (VALU...