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

20 comments:

  1. Aruna PereraMay 11, 2011 at 11:25 PM

    Hi,

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

    ReplyDelete
  2. AnonymousJune 20, 2011 at 4:18 PM

    can you post the StyleSheet.css file too?

    ReplyDelete
  3. Nisar HamzaOctober 15, 2011 at 1:55 PM

    Very nice article and helped me very much

    ReplyDelete
  4. AnonymousNovember 24, 2011 at 12:27 PM

    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

    ReplyDelete
  5. AnonymousDecember 20, 2011 at 12:03 PM

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

    Thanks

    ReplyDelete
  6. AnonymousDecember 22, 2011 at 11:13 AM

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

    ReplyDelete
  7. AnonymousJanuary 19, 2012 at 3:30 PM

    where the fucking style sheet

    ReplyDelete
  8. UnknownJanuary 24, 2012 at 12:34 AM

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

    ReplyDelete
  9. AnonymousJanuary 25, 2012 at 11:41 AM

    can u please complete your post with the Style Sheet

    ReplyDelete
  10. UnknownJanuary 25, 2012 at 12:07 PM

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

    ReplyDelete
  11. AnonymousJanuary 26, 2012 at 9:15 PM

    please post the images

    ReplyDelete
  12. web designing companyJanuary 30, 2012 at 5:08 PM

    Great posting is here, nice to read this.

    ReplyDelete
  13. AnonymousFebruary 6, 2012 at 1:30 AM

    Where are the images?

    ReplyDelete
  14. chowdarymcaFebruary 13, 2012 at 2:48 PM

    can u please send the two images?

    ReplyDelete
  15. AnonymousJune 12, 2012 at 7:17 PM

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

    ReplyDelete
  16. Salik Ram MauryaJune 20, 2012 at 3:39 PM

    very helpful

    ReplyDelete
  17. AnonymousJuly 17, 2012 at 2:24 AM

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

    ReplyDelete
  18. AnonymousJuly 26, 2012 at 5:55 PM

    can u post images

    ReplyDelete
  19. RS PrajapatiOctober 4, 2012 at 4:52 PM

    can u share css & img files

    ReplyDelete
  20. AnonymousFebruary 1, 2014 at 1:23 PM

    Gratitude for the help...

    ReplyDelete