In the post Open jQuery dialog on aspnet Button click, we have seen on how to show and hide a jQuery Dialog when
an Asp.Net button is clicked, what if we want to display the dialog when the
user hovers over a link, we shall see on how to get this working.
We can show the dialog on mouseover, by tracking the events mouseenter/ mouseleave.
Here
is a full example.
<html xmlns="http://www.w3.org/1999/xhtml" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery
Dialog Fading Effect</title>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet"
/>
<script type="text/javascript">
$(document).ready(function()
{
$('#lnkShow').mouseenter(function() {
$('#myDialog').dialog({
show: "fade", hide: "fade" });
});
$('#lnkShow').mouseleave(function() {
$('#myDialog').dialog('close');
});
});
</script>
</head>
<body>
<form id="frmDialogFading" runat="server">
<div id="myDialog" style="display:none;" title="Fading
Dialog">
This is a Fading Dialog
</div>
<div>
<a id="lnkShow" href="#">Show Dialog</a>
</div>
</form>
</body>
</html>
No comments:
Post a Comment