Introduction:
In this article,i am going to explain about how to create a ajax modal popup on mouseover.
Main:
In html,
<a href="" onmouseover="myMouseOver();">
<img runat="server" id="rollover" alt="" src="image.jpg" border="0" name="rollover" /></a>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="rollover"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="OkButton"
OnOkScript="Show()"
CancelControlID="CancelButton" />
JavaScript Code,
<script type="text/javascript">
var MakeChoice;
function Showk() {
alert("this is modal dialog");
}
function myMouseOver() {
$find("ModalPopupExtender1").show();
}
</script>
<a href="" onmouseover="myMouseOver();"> <img runat="server" id="rollover" alt="" src="image.jpg" border="0" name="rollover" /></a> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="rollover" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" OnOkScript="Show()" CancelControlID="CancelButton" /> JavaScript Code, <script type="text/javascript"> var MakeChoice; function Showk() { alert("this is modal dialog"); } function myMouseOver() { $find("ModalPopupExtender1").show(); } </script> |
Conclusion:
Hope this helps,
Happy Coding.
Can it be possible if I point to this webpage, from my blog? I’m wanting to find as many sources of good info as I can.
Yes you can,just use the share this option
Some of the pictures were not displaying correctly but, the site still looks good. I have been coming to this site for a few months now and i’m very impressed with the content. What is the feed address?
Hands down this is the best blog post I’ve read this week.