ModalPopupExtender Example

CSS
Let's make nice see thru background:

.modalBackground

{

  background-color:#CCCCFF;

  filter:alpha(opacity=40);

  opacity:0.5;

}

 

 Position should be -1000px, so during loading you not gonna see popup initialization.

 

.ModalWindow

{

  border: solid1px#c0c0c0;

  background:#f0f0f0;

  padding: 0px10px10px10px;

  position:absolute;

  top:-1000px;

}

 

 ASPX

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"

TargetControlID="lnkPopup"

PopupControlID="panEdit"

BackgroundCssClass="modalBackground"

CancelControlID="btnCancel"

PopupDragHandleControlID="panEdit">

</ajaxToolkit:ModalPopupExtender>

 

<asp:PanelID="panEdit"runat="server"Height="180px"Width="400px"CssClass="ModalWindow">

        <h1>Edit/h1>

        <table width="100%">

            <tr>

                <td class="formtext" style="height: 23px; width: 150px;" align="left">

                    Fields1:

                </td>

                <td>

                    <asp:TextBox ID="txtFields1" runat="server"></asp:TextBox>

                </td>

            </tr>           

       </table>

       <br />

       <asp:Button ID="Button1" runat="server" Text="Update" OnClick="btnUpdate_Click"/>

       <asp:Button ID="btnCancel" runat="server" Text="Cancel" />

</asp:Panel>


<a id="lnkPopup" runat="server">Show Popup</a>


Posted on Monday, March 17, 2008 by | Comments (48) | Add Comment

Comments

Gravatar

Re:ModalPopupExtender Example

ya its working in mozzila bt its useless for the IE 6.0 can u tell me how i set the position center of modalpopup in IE 6.0
thanks.

Posted on 11/21/2008 12:53:17 AM by manish nagar #
Gravatar

It should work in IE 6.0 as well. You probably have modalpopup panel in some kind of div container, which has style position equal to absolute or relative.

Gravatar

Re:ModalPopupExtender Example

Thanks.

Posted on 8/20/2009 1:43:22 AM by BP #
Gravatar

Re:ModalPopupExtender Example

Muito bom mesmo eu sou do Brasil e estava procurando um exemplo destes me esclareceu tudo que precisava. Very Good

Best Regards

Posted on 8/28/2009 12:22:48 PM by Rodrigo #
Gravatar

I glad that I can help.

Gravatar

Re:ModalPopupExtender Example

it good

Posted on 10/6/2009 6:09:05 AM by bodhi #
Gravatar

Re:ModalPopupExtender Example

Really very nice ... because you didnt explained in words but showed in ur code. thank u very much.

Suggestion : Create one blog and give tutorial, even u can get a little money. bcause it is such good

Posted on 10/15/2009 11:33:27 PM by om #
Gravatar

Re:ModalPopupExtender Example

Nice, up and running :)

That's the beauty of the internet, information is everywhere, thank you

Vanclei Matheus - Brazil

Posted on 10/28/2009 6:26:23 AM by Vanclei #
Gravatar

Re:ModalPopupExtender Example

Useless code, what the TargetControlID="lnkPopup" was not included? How is anyone suppose to know what is that?

Posted on 1/10/2010 8:56:43 PM by Joe #
Gravatar

You are right. I added missing code. Thank you for noticing.

Gravatar

Re:ModalPopupExtender Example

i want to know abourt behaviourid about popup exterdor

Posted on 3/12/2010 10:48:44 PM by bhimji mendaparara #
Gravatar

Behaviorid is a name of javascript variable for popup. Using this variable you can access corresponding javascript object.

Gravatar

Re:ModalPopupExtender Example

Ya its nice budyy.. Its working fine. Thanks

Posted on 4/29/2010 10:33:17 PM by Hemant Ghiya #
Gravatar

Re:ModalPopupExtender Example

thanx for the sample.
but i fail to try it.
can you give the complete code or the file

Posted on 6/17/2010 1:47:55 AM by mbanx #
Gravatar

Re:ModalPopupExtender Example

i am using modal pop up extender but its showing j script error..do solve it.

Posted on 6/24/2010 12:53:39 AM by priyanka #
Gravatar

What kind of error? Get Firefox and Firebug, it would help.

Gravatar

Re:ModalPopupExtender Example

I have a Modalpopupext control out side the repeater control. I have a button in repeater control. I am calling javascript function showmodalpopup() by using OnClientClick event of the button. It's working nice in IE but it's not showing in the Mozilla. Why

If any one knows why, please let me know the answer

Posted on 6/25/2010 1:29:29 AM by Madhusudhan #
Gravatar

Do you have Firebug installed? Do you see any javascript errors? Make sure that your OnClientClick function return false, so no post back happens.

Do something like this OnClientClick="ShowPopup();return false;"

Gravatar

Re:ModalPopupExtender Example

its doesnt work, position absolute -1000 doesnt change after popup is shown

Posted on 9/13/2010 6:08:27 AM by robert #
Gravatar

Re:ModalPopupExtender Example

try to download latest version of ajaxcontroltoolkit, position absolute top - 1000 never will work

Posted on 9/13/2010 6:10:02 AM by rrr #
Gravatar

Re:ModalPopupExtender Example

hi i want to use .aspx page as a modal window .how should i do it.

Posted on 10/23/2010 6:20:36 AM by jatin #
Gravatar

Put it in iframe and then use it with ModalPopupExtender.

Gravatar

Re:ModalPopupExtender Example

Excuse me. What does "OnClick="btnUpdate_Click" mean? I can't fine btnUpdate in your code. Did I miss something? Just want to understand what it does. Thank you. Great post.

Posted on 12/16/2010 12:01:16 AM by asplearning #
Gravatar

btnUpdate_Click is code behind event for button btnUpdate (aspx.cs or aspx.vb file).

Gravatar

Re:ModalPopupExtender Example

very helpful! much thxs 4 posting!!

Posted on 12/22/2010 12:08:07 PM by e f bolton #
Gravatar

Re:ModalPopupExtender Example

I'm Sorry ,
I want to ask you
how to make multiple modal popup in one modal popup

Posted on 12/23/2010 3:48:15 AM by Muhammad.Jaelano #
Gravatar

I don't think that this is possible. It goes against modal popups nature :-). It's like asking "Can I have two singeltons?".

Gravatar

Re:ModalPopupExtender Example

Hello,

thanks for your post, it's really helpfull. But I have a problem with this part of the CSS code:

filter:alpha(opacity=40);
opacity:0.5;

Filter and Opacity don't work in my project, I don't know what is happening? Please could you say what is wrong with it?

On the file css I see a message wich says "is not a name's property CSS known"

Posted on 1/9/2011 2:16:40 PM by Carlos #
Gravatar

It works. It just doesn't pass Visual Studio validation. It is not a standard CSS. It is a hack to support certain browsers. Browser that doesn't support it would ignore it.

Gravatar

Re:ModalPopupExtender Example

Hello,

It worked fine but when I click the update button it doesn't raise de event.
Any idea ???
Thanks a lot.

Posted on 2/2/2011 6:41:05 AM by Marcelo Rivera #
Gravatar

Does it do postback? Do you have button event handler?

Gravatar

Re:ModalPopupExtender Example

Hi.. Thank you for the example. I have a question:

I have a button at the bottom of the page...[scroll down the window] When i click it the ModalPopup opens the panel [but at the bottom of the screen], Can i make it scroll to the top of the page, i donot mean Manual scrolling, but When the popup appears it should appear at the top automatically. Is this possible?

Posted on 3/9/2011 9:19:19 AM by Sanjay #
Gravatar

You can specify Y parameter of ModalPopupExtender for vertical position.

Gravatar

Re:ModalPopupExtender Example

Awesome! Works like a charm! Thank you!

Posted on 3/19/2011 6:34:27 AM by Elham #
Gravatar

Re:ModalPopupExtender Example

I installed the Ajax Tool Kit to my VS 2008, am trying to use the controls as shown above but am getting a wired error saying that Unknown server tag 'ajaxToolKit:.... so please guys let me know what i haven't done yet to get use of them .. thank you

Posted on 3/21/2011 7:50:22 AM by Amr Hilmy #
Gravatar

You need to add control reference tag at the top of your page. Try drag and drop control from toolbox, it should add reference code automatically.

Gravatar

Re:ModalPopupExtender Example

Thanks for the code. The popup works great! However, my pop up is not a true modal. I can still click the buttons behind. Is this normal? Seems to be ignoring the css file. I do have the css file linked as other controls are finding it. Any ideas?

Posted on 3/27/2011 12:13:06 PM by Kim #
Gravatar

It should not be a css problem. Other controls are usually blocked by div. CSS controls how this div is looked like (opacity, color). Use FireBug to see if controls are blocked by overlay div.

Gravatar

Re:ModalPopupExtender Example

I have a dropdown box on a aspx page. If the user select a certain value I need the box to popup and ask for more info. Is there away to do this with the modalpopup?

Posted on 4/8/2011 9:51:14 AM by jeff #
Gravatar

Sure there is a way. You need to specify behaviorid of your ModalPopupExtender and then:
$find('yourbehaviourid').show();

Gravatar

Re:ModalPopupExtender Example

code does not work what is cause behind please help

Posted on 4/14/2011 4:44:43 AM by Naresh #
Gravatar

What framework you are using? What error you are getting?

Gravatar

Re:ModalPopupExtender Example

I have the next problem, the panel in debug mode works perfectly, but when i publish the site it doesn't show the vertical scrollbar. if you can help me i'll be greatfull. thanks for your atention.

Posted on 4/15/2011 11:35:28 AM by fernando #
Gravatar

You said you published it. What is a link?

Gravatar

Re:ModalPopupExtender Example

It's a popup window where you can choose one (of various) option. And i'm talking about diferencies between the published site and debug mode in VisualStudio2008 (both opened with Internet Explorer 7). I have a print screen if it can help to specify my description. Thanks for your atention and excuse me for my bad spelling

Posted on 4/20/2011 11:52:49 AM by fernando #
Gravatar

It should not produce different results. The difference between two modes is in produced DLLs. Debug version has debug symbols in them, published do not. Install IE Developer tools and see if you can track issue from there. It is probably some style issue.

Gravatar

Re:ModalPopupExtender Example

thanks for your information...

Posted on 5/3/2011 9:19:43 AM by alexa #
Gravatar

Re:ModalPopupExtender Example

Even though i have kept drag=false,modal popup can be move anywhere.What i can do to prevent this?Please help me..

Posted on 5/5/2011 2:32:43 AM by Vichee #
Gravatar

Correct syntax is Drag="false", also try to remove PopupDragHandleControlID attribute.

Gravatar

Re:ModalPopupExtender Example

Hi,
I'm trying to use the Extender, I want to call from my page to another page and I want it to open in the Popup, everything is ok untill the post back.. I have DropDown list in my page that you can see in the Pop Up, and when I select any value I'm doing post back, and after that my page (that I saw in the Popup) disappear.. any ideas???

Posted on 5/7/2011 1:29:08 AM by lin #
Gravatar

In your Page_Load event check if it is post back (isPostBack page property) and if it is post back do YourPopupExternderVariable.Show().

Gravatar

Re:ModalPopupExtender Example

Hi there, I also have a question. How to make modal popup window to be fixed on the page, and not on the screen? For example, when I move the scroll of browser window, I want modal popup to be fixed and not to move together with the scroll?
I have only .dll file, and I can not access ModalPopupExtender.cs and ModalPopupExtender.js.
Thanks
ddk

Posted on 5/17/2011 11:09:20 AM by Ddk #
Gravatar

This is contradicts to definition of modal popup. As far as I know it is not possible.

Gravatar

Re:ModalPopupExtender Example

thanks yaar it is realyhelpful

Posted on 6/30/2011 2:23:51 AM by awedfeaf #
Gravatar

Re:ModalPopupExtender Example

Nice,

Thank u very much

Posted on 8/2/2011 11:06:18 PM by Bang Rock #
Gravatar

Re:ModalPopupExtender Example

I'm trying to set the popup panel height and width using the style= In IE it works fine in FF it does not size the panel properly. The style code is:
Style="display: none; height:590px; width:800px; overflow:auto" but it just a small box in the middle of the page. Any help would be great.

Posted on 8/23/2011 1:17:11 PM by Bob #
Gravatar

You are lucky. Usually it is opposite. Use Firebug to investigate your issue. If it is available publicly somewhere then I can help.

Gravatar

Re:ModalPopupExtender Example

Hi,
I used Modal popup extender in a Usercontrol and I used the usercontrol in many aspx pages. The extender's visibility is restricted in javascript ie when the extender should be shown but the extender is appearing and hiding(just a blink) for some other actions like a button click and when clicking on a Menu in the aspx page. Need help to fix this.
Thanks.

Posted on 8/30/2011 2:39:13 AM by Durga #
Gravatar

This part of css suppose to fix this:
.ModalWindow
{
...
top:-1000px;
}

Gravatar

Re:ModalPopupExtender Example

Hi,
I never see the modal popup panel. The code is executing because the existing page has the modal background style applied and is not accessible. I've tried every positioning, display, & z-index combination I can think of. All I ever get is the opaque background and an inaccessible page. Never a popup. Please help!

Posted on 9/17/2011 8:04:40 AM by Jimbo #
Gravatar

Re:ModalPopupExtender Example

Update button click doesnt fire. what can i do
i need two buttons Try again and skip. If processing of some records fail then i want to show this popup. If user clicks Try again i want to process those records again and if Skip then continue with next set of records
can you please tell me how do i tap values of Try again and Skip

Posted on 9/29/2011 11:53:42 PM by Annuja #
Gravatar

Re:ModalPopupExtender Example

i am adding data from pop extender but it's not working

Posted on 12/8/2011 10:08:43 PM by shalini #
Gravatar

Can you give more details?

Gravatar

Re:ModalPopupExtender Example

Not a Good Tutorial. IMHO Sorry

Posted on 12/13/2011 1:08:24 AM by Sakvith #
Gravatar

Re:ModalPopupExtender Example

thanks for simple easy to understand code - although there's a lot of info available examples like this aren't easy to find

Posted on 12/19/2011 8:46:08 AM by steve #
Gravatar

Re: ModalPopupExtender Example

Hi
is that possible we can put maximum button(icon)/minimum button on the top right corner of the panel? and how to set their position in code behind? much appreciated help in advance

Posted on 2/2/2012 9:33:41 AM by helen #
Gravatar

No it is not possible. ModalPopupExtender serves different purpose. You want some kind of MDI windows interface. Look at ExtJS libraries for this.

Gravatar

Re: ModalPopupExtender Example

many errors pls remove this code

Posted on 2/12/2012 12:27:16 AM by karpach #
Gravatar

Re: ModalPopupExtender Example

Hey there. Thanks for the amazing example.

Unfortunately, I am still seeing the 'popup initialization' on startup. Is there another way to fix this?

Posted on 8/31/2012 4:02:54 AM by Darren #
Gravatar

Re: ModalPopupExtender Example

remove PopupDragHandleControlID="panEdit"

Posted on 10/15/2012 5:24:48 AM by muthu #
Gravatar

Re: ModalPopupExtender Example

thanks for your post it is really helpful for me..

Posted on 12/19/2012 3:28:37 AM by Ranjan #
Gravatar

Re: ModalPopupExtender Example

created 7 modalpopupextenders with the lnkPopups in a ul in a small test project and all works as desired. Moved everything to my full site using a master page and now it display all 7 extenders all the time. Developing in VS2012 Ultimate with Update 2 on Windows 7. Any sugestions???

Posted on 4/8/2013 6:05:19 AM by Carlos #
Gravatar

Re: ModalPopupExtender Example

hai,i have one doubt for using modal popup window in the list item of dropdownlist..ie..i have one dropdown which get the value from db..whenever i select the dropdownlist items i want to show modal popup window for each item in dropdown for eg i have 5 values in db that should be shown in runtime..if i select a means it should open one popup window for instructions regarding a like this for remaiming values in dropdown..can u give me a solution for this..my mail-id: manosekar18@gmail.com

Posted on 5/29/2013 3:25:58 PM by manoj #

New Comment

Your Name:
Email (for internal use only):
Comment:
 
Code above:

Categories

Valid HTML5