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
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>
If you like this post than join us or share
20 comments:
Hi,
Cant I download this "StyleSheet.css" file??
can you post the StyleSheet.css file too?
Very nice article and helped me very much
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
Can you share the "StyleSheet.css" file please?
Thanks
Anyone can provide me the "Stylesheet" file of this example..!! Please
where the fucking style sheet
what if i want , user fill some fields in this pop up and then i get these variables and use it !!!!!1
can u please complete your post with the Style Sheet
@All: I have added stylesheet.css code in the post
please post the images
Great posting is here, nice to read this.
Where are the images?
can u please send the two images?
Does anyone have the Images?? Whats the point in sending the CSS code without the images???
very helpful
dudes copy the stylesheet by viewing plain text source. WTF is wrong with you people, are really programmers or dumb whackos
can u post images
can u share css & img files
Gratitude for the help...
Post a Comment