15

Ajax ModalPopUpExtender Example

In this example i'm going to describe how to implement Ajax Modal PopUp Extender on Mouse Over in ASP.NET using C# and VB.NET

For this to work u need to download and install ajaxcontroltoolkit

Read ModalPopUpExtender In Gridview To know how to use modalpopup Extender in master detail gridview

Create a new website in visual studio and write html markup of aspx page as shown below.


Put AjaxControlToolkit.dll in BIN folder and register assembly in page directive of ur aspx page.

<%@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

Add this javascript method between <head></head> section of page

<script type="text/javascript">
function MouseHover() 
{
$find("modelPopupExtender1").show();
}
</script>

Add new StyleSheet to solution and write below mentioned css style in it.

body { 
    BACKGROUND: #fff;FONT: 12px/1.25 "Helvetica Neue", Arial, sans-serif; 
    COLOR: #222;
}
.confirm-dialog { 
    BACKGROUND: url(img/box.png) no-repeat left top; 
    MARGIN: 0px auto;WIDTH: 330px;PADDING-TOP: 14px; 
    POSITION: relative;
}
.confirm-dialog .inner { 
    PADDING-RIGHT: 20px;PADDING-LEFT: 20px; 
    PADDING-BOTTOM: 11px;BACKGROUND: url(img/box.png) no-repeat left bottom; 
    FLOAT: left;MARGIN: 0px 0px -20px 0px;WIDTH: 290px;PADDING-TOP: 0px;
} 
.confirm-dialog .base { 
    BORDER-TOP: #ddd 1px solid;BACKGROUND: url(img/base.png) no-repeat left bottom; 
    PADDING-BOTTOM: 4px;MARGIN-LEFT: -11px;MARGIN-RIGHT: -11px; 
    PADDING-TOP: 4px;TEXT-ALIGN: center;
}
.confirm-dialog H2 { 
    FONT-WEIGHT: bold;FONT-SIZE: 1.25em;COLOR: #f60;TEXT-ALIGN: center;
} 
.confirm-dialog input { 
    WIDTH:50px;
}     
.close { 
    DISPLAY: block;BACKGROUND: url(img/close.png) no-repeat 0px 0px; 
    LEFT: -5px;WIDTH: 26px;TEXT-INDENT: -1000em;POSITION: absolute; 
    TOP: -7px;HEIGHT: 26px; 
}   
.modalBackground {
    background-color:Gray;filter:alpha(opacity=70);opacity:0.7;
} 

The complete HTML source of page will look like this
<%@ Page Language="C#" AutoEventWireup="true"  
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Model PopUp Extender With MouseOver Example</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">

        function MouseHover() 
     {
         $find("modelPopupExtender1").show();
     }
  
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<ajaxToolkit:ToolkitScriptManager ID="toolKitScriptManager1" 
                                  runat="server">
</ajaxToolkit:ToolkitScriptManager>    
<p style="background-color: #9999FF; width: 95%;">
     
Example of using a ModalPopupExtender with with Mouse Over
<br/></p><br/>
Hover over the hyperlink 
<asp:HyperLink ID="HyperLink1" runat="server" 
               onmouseover="MouseHover();" 
               Font-Underline="True" ForeColor="Blue">
<b>Mouse Over Here to Open PopUp</b>
</asp:HyperLink> to open pop up
            
<ajaxToolkit:ModalPopupExtender runat="server" 
                   BehaviorID="modelPopupExtender1" 
                   TargetControlID="HyperLink1"
                   PopupControlID="popUpPanel" 
                   OkControlID="btnOk" 
                   BackgroundCssClass="modalBackground" >
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="popUpPanel" runat="server" 
           CssClass="confirm-dialog">
<div class="inner">
<h2>
Thanks For Visiting This Site</h2>
<div class="base">
<asp:Button ID="btnOk" runat="server" Text="Ok"/>
<asp:LinkButton ID="LinkButton1" runat="server" 
                CssClass="close" 
OnClientClick="$find('modelPopupExtender1').hide(); return false;"/>
</div></div>
</asp:Panel>
            
                  
            
    </div>
    </form>
</body>
</html>

Popular Posts

Find More Articles