Sunday, January 18, 2009

Adding new popup window (modal) to a webpage

Adding new popup window (modal) to a webpage is not that hard, but can be a little tricky.
let's describe how it should be done :

  1. We create an asp:Panel 
  2. We create an modalPopupExtender. It is located in the AjaxControlToolkit 
  3. We Create a Hidden Button . Something has to be a trigger for a popup to show up. If you do that as I do , meaning you make a modal to show up on screen using a Javascript (latter) you still have to create a control to trigger the modal. That's why we create a asp:button.
    <asp:button id="openModal1" runat="server">
     
  4. Configuration 
  5. 1-ModalPopupExtender :  
    TargetControlID should point to the button or the control we want to trigger the popup
    PopupControlID should point to the panel we want to open (step 2 )
    BehaviorID is the clientside name of the popup .. if we want to call it from  the HTML\javascript $find('behID').show(); will show up the popup . 
    2-Panel the Id has to the the value in the PopupControlID
  6. Then, we add the script that shows up the modal , something like :
    function onLoad(){
    $find('behID').show();
    }
  7. note that the value in the brackets points to the behaviorID proterty of the ModalPopupExtender

No comments:

Post a Comment