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>
