Ajax ModalPopUpExtender Example

In this post i'm showing Ajax ModalPopUpExtender Example In Asp.Net 2.0,3.5,4.0 Using C# VB.NET to open popup on mouseover. For this to work u need to download and install ajaxcontroltoolkit

Ajax ModalPopUpExtender Example In Asp.Net
I have also implement ModalPopUpExtender In Gridview to show master detail data.

Create a new website in visual studio

Add one hyperlink on the page and write html markup of ModalPopExtender to open popup on mouse over on hyperlink on 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() 

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-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-TOP: 4px;TEXT-ALIGN: center;
.confirm-dialog H2 { 
    FONT-WEIGHT: bold;FONT-SIZE: 1.25em;COLOR: #f60;TEXT-ALIGN: center;
.confirm-dialog input { 
.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 {

<Ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
<p style="background-color: #9999FF; width: 95%;">
Example of using a ModalPopupExtender with with Mouse Over
Hover over the hyperlink 
<asp:HyperLink ID="HyperLink1" runat="server" 
               Font-Underline="True" ForeColor="Blue">
               <b>Mouse Over Here to Open PopUp</b>
</asp:HyperLink> to open pop up
<Ajax:ModalPopupExtender runat="server" 
                   BackgroundCssClass="modalBackground" >
<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;"/>

Download Sample Code

If you like this post than join us or share


Aruna Perera said...


Cant I download this "StyleSheet.css" file??

Anonymous said...

can you post the StyleSheet.css file too?

Nisar Hamza said...

Very nice article and helped me very much

Anonymous said...

i have added two buton in ajax popup window(submit and cancel). if i clik submit it will do some function in code behind, if that function failes*(due to some condition) then i have to popup the same window(popu). any solution.
right now the popup is going off

Anonymous said...

Can you share the "StyleSheet.css" file please?


Anonymous said...

Anyone can provide me the "Stylesheet" file of this example..!! Please

Computer Killer said...


Anonymous said...

where the fucking style sheet

Unknown said...

what if i want , user fill some fields in this pop up and then i get these variables and use it !!!!!1

Anonymous said...

can u please complete your post with the Style Sheet

Unknown said...

@All: I have added stylesheet.css code in the post

Anonymous said...

please post the images

web designing company said...

Great posting is here, nice to read this.

Anonymous said...

Where are the images?

chowdarymca said...

can u please send the two images?

Anonymous said...

Does anyone have the Images?? Whats the point in sending the CSS code without the images???

Salik Ram Maurya said...

very helpful

Anonymous said...

dudes copy the stylesheet by viewing plain text source. WTF is wrong with you people, are really programmers or dumb whackos

Anonymous said...

can u post images

RS Prajapati said...

can u share css & img files

Anonymous said...

Gratitude for the help...

Find More Articles