Launching an Ajax ModalPopupExtender from JavaScript


	Launching an Ajax ModalPopupExtender from JavaScript

elruso

7-10-2007 4:38 PM

1448 views

tags:

asp.net, ajax, atlas

1 Comment |

Add a Comment

9-11-2008 3:13 PM

vasireddybharath

I am using javascript to show the modalpopup but its getting hide after it is shown. (it is becoming invisible as soon as it is show).

Thanks
Bharath Reddy VasiReddy

Login to Comment. Not a member yet? Sign up

Today's Top Clips

visit the Top Clips page

View the Top Clips from July 10, 2007

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/aaad7f38-c1e1-408b-864b-a18193975f80/B6A6003C-BC7A-4E8F-A7F7-86C9DCBF67E8/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm" href="http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm" style="font-size: 11px;">www.geekzilla.co.uk</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm"><P>This is an updated version of the earlier (and very popular) <A href="http://www.geekzilla.co.uk/ViewDAAE6AAB-0369-45C2-BE78-B8E6F876B4F4.htm" class="externalLink">Atlas article</A> 
</p> <P>It is by far the simplest way to launch an Ajax <A title="Different versions of this topic exist.  Click to pick one.">ModalPopupExtender</A> from javascript.
</p> <H2>The groundworks
</H2>
<P>Add a hidden link for ModalPopup Extender to attach to(<STRONG>which will NEVER be used</STRONG>)
</p> <PRE class="csharpcode"><SPAN class="kwrd">&lt;</SPAN><SPAN class="html">a</SPAN> <SPAN class="attr">href</SPAN><SPAN class="kwrd">="#"</SPAN> <SPAN class="attr">style</SPAN><SPAN class="kwrd">="display:none;visibility:hidden;"</SPAN> 
   <SPAN class="attr">onclick</SPAN><SPAN class="kwrd">="return false"</SPAN> <SPAN class="attr">ID</SPAN><SPAN class="kwrd">="dummyLink"</SPAN> <SPAN class="attr">runat</SPAN><SPAN class="kwrd">="server"</SPAN><SPAN class="kwrd">&gt;</SPAN>dummy<SPAN class="kwrd">&lt;/</SPAN><SPAN class="html">a</SPAN><SPAN class="kwrd">&gt;</SPAN>
</PRE>
<P>Add the ID of the hidden link to the <A title="Different versions of this topic exist.  Click to pick one.">ModalPopupExtender</A>
</p> <PRE class="csharpcode"><SPAN class="kwrd">&lt;</SPAN><SPAN class="html">ajaxToolkit:ModalPopupExtender</SPAN> <SPAN class="attr">ID</SPAN><SPAN class="kwrd">="MyMPE"</SPAN> <SPAN class="attr">runat</SPAN><SPAN class="kwrd">="server"</SPAN>
    <SPAN class="attr">TargetControlID</SPAN><SPAN class="kwrd">="dummyLink"</SPAN>
    <SPAN class="attr">PopupControlID</SPAN><SPAN class="kwrd">="EditorPanel"</SPAN>
    <SPAN class="attr">BackgroundCssClass</SPAN><SPAN class="kwrd">="modalBackground"</SPAN> 
    <SPAN class="attr">DropShadow</SPAN><SPAN class="kwrd">="true"</SPAN> 
    <SPAN class="attr">OkControlID</SPAN><SPAN class="kwrd">="OkButton"</SPAN>
    <SPAN class="attr">CancelControlID</SPAN><SPAN class="kwrd">="CancelButton"</SPAN><SPAN class="kwrd">&gt;</SPAN> 
<SPAN class="kwrd">&lt;/</SPAN><SPAN class="html">ajaxToolkit:ModalPopupExtender</SPAN><SPAN class="kwrd">&gt;</SPAN>
</PRE>
<H2>Showing the modal popup
</H2>
<P>Now you've done this, in Javascript, you can display the modal quite easily... here's how.
</p> <PRE class="csharpcode">$find(<SPAN class="str">'MyMPE'</SPAN>).show();
</PRE>
<H2>Hiding the modal popup
</H2>
<P>Just as easy...
</p> <PRE class="csharpcode">$find(<SPAN class="str">'MyMPE'</SPAN>).hide();</PRE></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/B6A6003C-BC7A-4E8F-A7F7-86C9DCBF67E8/blog/" title="blog or email this clip"><img src="http://content7.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>

New from the makers of Clipmarks: Amplify.com - Don't just share the news...Amplify it!

Clipmarks: Home; New Clips; Top Clips; Dashboard

Popular Topics: News; Life; Science; Technology; Entertainment

Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch

Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map

About Clipmarks: About Us; Contact; Copyright; Privacy; EULA

Search Options

Today's Top Clips