Today’s customer question concerns client side predicates for showing a Modal Popup control.

I’m happy to be getting these kind of questions because it shows how ASP.NET developers are continuing to evolve their web development perspective and separate server logic execution and client logic execution.

Though the Modal Popup Extender is a Server Side control extender it HAS client side events and methods. This exposes the Modal Popup to any JavaScript coding that we want.

Example – mouseover !

Code Snippet
  1. <a href="" onmouseover="myMouseOver();">
  2. <img runat="server" id="rollover" alt="" src="image.jpg" border="0" name="rollover" /></a>
  3. <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
  4.           TargetControlID="rollover"
  5.           PopupControlID="Panel1"
  6.           BackgroundCssClass="modalBackground"
  7.           DropShadow="true"
  8.           OkControlID="OkButton"
  9.           OnOkScript="onOk()"
  10.           CancelControlID="CancelButton" />

Note that the TargetControlID is the Image of the anchor tag and the onmousover event handler calls my custom JaqvaScript function myMouseOver() which displays the Modal Popup as follows:

Code Snippet
  1.     <script type="text/javascript">
  2.     var MakeChoice;
  3.     function onOk() {
  4.     // Do stuff Here.
  5.     }
  7.     function myMouseOver() {
  8.         $find("ModalPopupExtender1").show();
  9.     }
  11. </script>

Click OK or Cancel closes the Modal Popul as you would expect.

Viola !

Bur don’t stop there – use more client side logic to customize the user experience. For example, you could automatically display the Pop Up on Mouse Over and start a timer to count down and hide it again ( $find(“ModalPopupExtender1”).hide(); ) after a certain number of seconds.

Keep making your UIs ROCK !

You can download a runnable sample [ HERE ]

Technorati Tags: ,