I have a web user control with a modal popup extender in it. the modal popup contains an asp:Panel control in it. This panel contains other controls.
I'd like to make the modal popup scroll as the user scrolls the page. (position:absolute)
Tried to set X and Y properties of the popup extender. it changes the X and Y properties of the popup. But still: position:fixed
Tried to set the Panel's CssClass to (.ModalWindow) which has the following defiition: .ModalWindow{position:absolute;} But the position:fixed overrides it.
Tried to wrap the asp:Panel in a div: <div style="position:absolute;"> But still no luck.
Have you tried the following:
.ModalWindow {position: absolute!important;}
The !important override is a really handy trick, particularly when working with ASP.NET controls.
Here's a bit more about it:
http://www.electrictoolbox.com/using-important-css/
Related
I have a button inside a jquery mobile popup div. I will like to set a onclick javascript function to let the popup div close without using the id of the div once the button clicked. Any solution?
Can call parent too:
$(this).parent(".ui-popup").popup("close");
Desired behavior:
popup1 is 100x100
popup2 is 50x50
neither popup can be modal for my purposes.
When popup1 is shown popup2 should also be shown in front of it. I want popup2 to always be in front of popup1 but when I click on popup1 then popup2 is always moved behind popup1. When I say "in front" I mean that I want popup2 to always have a higher z-index (foremost) even when popup1 is the active popup.
Attempts and info:
I can see in the page markup that a single popup gets a z-index of 12000 by default.
I have tried using css to give each popup different z-index values like so:
.popup1{z-index:20000!important;}
.popup2{z-index:21000!important;}
I also tried it like this:
.popup1{z-index:11000!important;}
.popup2{z-index:12001!important;}
I also tried wrapping each popup in a div tag with similar css.
Each popups z-index is updated to 12002 depending on whether or not it is active or not and this is regardless of what I set it to.
I also tried wrapping the larger popup in a div tag and handling the onclick event to set the z-index of the smaller popup.
Thanks in advance!
Some semi-related links:
http://www.devexpress.com/Support/Center/p/Q346044.aspx
http://www.devexpress.com/Support/Center/p/Q382392.aspx
http://www.devexpress.com/Support/Center/p/Q36091.aspx
You can invoke popup2 BringToFront method in popup1 Shown event.
<dxpc:ASPxPopupControl ClientInstanceName="popup1"...>
<ClientSideEvents Shown="
function(s, e) {
if(e.window.index == 0) popup1.BringWindowToFront(popup1.GetWindow(1))
}"/>
</dxpc:ASPxPopupControl>
This sample works with one popup control containing two windows. If that isn't your case (maybe you have two popup controls with one window) just adapt sample to your needs.
Previously I tried wrapping popup1 (rear) in a div that handled the onclick event to bring popup2 (front) to the front but that did not work.
What did work was to handle the onmousedown event of the div wrapper instead.
I have a Panel that I'm using as a modal dialog box, and as such the contents should be hidden from view while the page is loading. However, if I use CSS to set the div's display:none or visibility:hidden then the YUI show() & hide() methods don't work properly (eg, clicking the button to call up the modal dialog greys out the screen, but the referenced div does not appear). Can anyone point me towards the best way to do this?
Thanks!
Try adding yui3-widget-loading to the container div. When Y.Panel is instantiated, it will remove this class. You can then define .yui3-widget-loading { display:none; } so it is not visible during page load.
i have an asp.net ajax hovermenuextender on a modalpopup panel to display a tip on hover.
the problem is the (tip) panel with the hovermenuextender appears below the modalpopupextender in IE8
this is a z-index issue, is there any place in the page where i can set the z-index for the hovermenu so that it appears over modalpopup,
i learnt that this change could be made in the PopupBehavior.js file from here:
http://ajaxcontroltoolkit.codeplex.com/workitem/26107
but i am using the Ajaxcontroltoolkit.dll in the project and its not possible to modify the ajax javascript source files.
thanks in advance.
I have running version AJAX 3.0 and adjusting the z-index did the trick. Thank you!
Make sure your PopupMenu container has higher z-index than the modal popup control. If you use Firefox with Firebug plugin you can find it easily when the page gets rendered. Just right click on the modal popup background -> Inspect element with Firebug -> on the right side swap to the "Computed" tab and you will find the current z-index in the object properties.
In the CSS classes for your Modal Popup and the Model Background you can try adding an overriding z-index entry that is less than the default for the hover menu popup. Something like:
.dialog {
z-index: 99 !important;
}
.dialog-bkg {
z-index: 90 !important;
}
Apply the "dialog" class to your modal popup panel, and supply the "dialog-bkg" class in the BackgroundCssClass property of the ModalPopupExtender.
I don't know if it will solve the issue with the hover menu -- but it may be worth a try.
BTW -- I just tested with version 4.1.404 of the Ajax Control Toolkit and I was able to use a hover menu on top of a modal popup without needing any changes...
I have an asp.net usercontrol that contains a jQuery UI Dialog Control.
All works as expected execpt the grey tranparent overlay (to make the form modal) only appears on the hidden div below the form where the dialog is triggered from.
Is it possible to target this overlay to the parent div? or is this not the right solution.
I have tried the blockUI plugin (and removing the Dialog style to prevent its overlay showing), but although it "looks" right on screen it disables all the controls including the ones in the dialog popup.
Any ideas?
Added: Screenshot
alt text http://www.freeimagehosting.net/uploads/e0555a0ec5.jpg
It might be a z-order issue. Can you post a screenshot to make it easier to understand. Also please post the high level HTML you are using on the aspx page.