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() 
{
$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;
} 


HTML SOURCE
<Ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
<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
            
<Ajax:ModalPopupExtender runat="server" 
                   BehaviorID="modalPopupExtender1" 
                   TargetControlID="HyperLink1"
                   PopupControlID="popUpPanel" 
                   OkControlID="btnOk" 
                   BackgroundCssClass="modalBackground" >
</Ajax: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>


Download Sample Code


If you like this post than join us or share

20 comments:

arr said...

Hi,

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
vinodtvc@yahoo.co.in


Anonymous said...

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

Thanks


Anonymous said...

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


Computer Killer said...

Thanks..


Anonymous said...

where the fucking style sheet


vishal sharma 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


amiT jaiN 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


satyam said...

can u share css & img files


Find More Articles