Today’s customer question concerns client side predicates for showing a Modal Popup control.
I’m happy to be getting these kind of questions because it shows how ASP.NET developers are continuing to evolve their web development perspective and separate server logic execution and client logic execution.
Though the Modal Popup Extender is a Server Side control extender it HAS client side events and methods. This exposes the Modal Popup to any JavaScript coding that we want.
Example – mouseover !
- <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="onOk()"
- CancelControlID="CancelButton" />
Note that the TargetControlID is the Image of the anchor tag and the onmousover event handler calls my custom JaqvaScript function myMouseOver() which displays the Modal Popup as follows:
- <script type="text/javascript">
- var MakeChoice;
- function onOk() {
- // Do stuff Here.
- }
- function myMouseOver() {
- $find("ModalPopupExtender1").show();
- }
- </script>
Click OK or Cancel closes the Modal Popul as you would expect.
Viola !
Bur don’t stop there – use more client side logic to customize the user experience. For example, you could automatically display the Pop Up on Mouse Over and start a timer to count down and hide it again ( $find(“ModalPopupExtender1”).hide(); ) after a certain number of seconds.
Keep making your UIs ROCK !
You can download a runnable sample [ HERE ]
RE: ASP.NET AJAX Modal Popup on Mouse Over
Pingback from ASP.NET AJAX Modal Popup on Mouse Over : Misfit Geek
RE: ASP.NET AJAX Modal Popup on Mouse Over
This post was mentioned on Twitter by MisfitGeek: New blog post: http://tinyurl.com/yggv28h – ASP.NET AJAX Modal Popup on Mouse Over
RE: ASP.NET AJAX Modal Popup on Mouse Over
Pingback from ?? Research Firm Bullish on ASP Market | ASP WebDev Insider
hey joe, is there a reason for surrounding the img element with an a element? I see this done all over the place. for events on an img i would normaly just use the onmouseover and onmouseout events on the img with a style="cursor:pointer;border:none;" attribute for a situation as this above. so i ask just out of curiosity, have i been missing something?
Hey,
It’s not necessary JUST for the mouseover but images are often used inside anchor tags so that the image is clickable.
In the case oif this code you could just put a url inside the href="" and clicking on theimage would valigate to that url.
Joe
right, but img has onclick event also so onclick="location.href=’mypage.aspx’;" with the above style attribute gets you the same result in one element. i was just asking to make sure there wasnt a real reason for it.
The HTML Image tag has an onclick JavaScript event which is NOT the same as the <a> click behavior.
To navigate using the <image> onclick event handler you would have to write javascript to perform the navigation.
gotcha! cool site btw thanks for all you do.
My pleasure – THANKS !
i am sorry, i really dont mean to be a thorn and please feel free to delete these comments. you are already using javascript on the a element/behavior? so why would you not just use on the img alone?
[code]
<img runat="server" id="rollover" alt="" src="image.jpg" onmouseover="myMouseOver();" style="cursor:pointer;border:none" />
[code]
ITS OK
Rich – so how do you navigate from that code ?
well if it was going to link from it, i would normally just add some inline js to the onclick event, onclick="location.href=’somepage.aspx’;"
i didnt come here to beat you up over it, you have a useless a element with an onclick event attached surrounding a fully capable img tag you could attach to. i have seen this done in alot of examples lately and i simply wanted to know if there was an actual reason people do this that i have been unaware of.
No problem rich. There are always many ways to accomplish the same task.
Must people don’t use the method you suggest (navigation from functional code) for a few reasons.
1.) It does work without JavaScript. This includes SEARCH ENGINE SPIDERS so Google or Bing can not navigate that kind of link.
2.) It’s more work. You have to write code to do something that is built in to <a>
3.) It’s less efficient (though not a big deal.)
#1 is the big reason, but that is not to say that there aren’t times when JavaScript navigation is good, especially when you are implementing AJAX behaviors like predictive fetch of a custom navigation history.
Thank you! that is exactly what i was looking for.
Right, many trade offs can be done but you "work" for ms, i expect your code to have a certain value of correctness and efficiency to it, not just a lazy way of doing things. hundreds/thousands of kids are going to grab this code and run with it and it will be feed out to millions… plant your seeds carefully. 😉
I use this convention becuase it works for me. Your opinin of "value of correctness" is up to you. But not understanding my reasoning doesn’t make your way better or worse than mine.
Many folks don’t care about SEO or performance.
For me I try to always use the same CONVENTIONS for exacty the reasons you suggest. Becuase many people read me code, I try to acomplish a given task the same was every time.
In this case I don’t use the href, this is simple demo code, but it is presented with the convention that is SEO friendly becuase many people actually want search engines to promote their web sites,
Anyway, if you find this method "incorrect" or without "value" – do your own thing.
Whilst my mother always told me that "If you haven’t got anything constructive to add…", I’ve simply got to say that attaching Modal to rollover sounds extemely counter intuitive… It would be more like playing a maze than using an interface.
But always nice to see new ways of doing thing, see I balanced it out. 😛
Rich, not sure I agree totally… Any developer or "kid" worth their salt wont just cut and paste code without understanding what it does, how it works, and what the alternatives are.
i understand you are not man enough to let my comments be seen. like i said i did not come here to beat you up. i graze your pages quite often and i had a simple question. guess i ruffled your ego so ill be on my way now, just remember that kids will take your code as gospel.
Rich – thanks for going away. Your recess is over
People are strange…