For this to work u need to download and install ajaxcontroltoolkit
Read ModalPopUpExtender In Gridview To know how to use modalpopup Extender in master detail gridview
Create a new website in visual studio and write html markup of 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;
} The complete HTML source of page will look like this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ajax Model PopUp Extender With MouseOver Example</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css"/> <script type="text/javascript"> function MouseHover() { $find("modelPopupExtender1").show(); } </script> </head> <body> <form id="form1" runat="server"> <div> <ajaxToolkit:ToolkitScriptManager ID="toolKitScriptManager1" runat="server"> </ajaxToolkit:ToolkitScriptManager> <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 <ajaxToolkit:ModalPopupExtender runat="server" BehaviorID="modelPopupExtender1" TargetControlID="HyperLink1" PopupControlID="popUpPanel" OkControlID="btnOk" BackgroundCssClass="modalBackground" > </ajaxToolkit: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> </div> </form> </body> </html>
