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.
Related
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/
i have a filter panel with 5-6 combo boxes ajax control tool kit..
i want this filter panel to be visible false by default.. and toggle it(show/hide) on client click using java script
however when i have my filter panel as visible = false runat=server java script does not get the object
and if i do code behind.. filterpanel.attributes.add("style",display:none)
filterpanel.attributes.add("style",visibilty:hidden)
the combo box throws a runtime error..
i've searched on the net which says.. combo box is difficult to render inside a panel.. whose default property is initially false!
The problem is that the <select> elements have to be rendered (but not necessarily visible) in order to reliably access their dimension properties.
So display: none; won't work because the elements are not rendered, and visibility: hidden; will partially work because the elements are rendered, so space is allocated for them on the page, but hidden, so that space will remain empty.
A third solution is to render the container as usual, but make it absolutely positioned outside of the browser viewport:
filterPanel.Attributes.Add("style",
"position: fixed; left: -10000px; top: -10000px;");
That way, the panel and its contents won't be visible, but the size of the <select> elements will be properly computed.
On the client side, the formula to show the panel becomes:
document.getElementById("filterPanelClientID").style.position = "static";
And to hide it again:
document.getElementById("filterPanelClientID").style.position = "fixed";
You can test a jQuery-based implementation here.
The issue is that if you set Visible="false" on a server control, it won't render any of the HTML elements, including the combo boxes. Hiding the panel using the following is AJAX friendly:
<asp:Panel id="p" runat="server" style="display:none">
</asp:Panel>
Which will render a DIV and all your drop downs, but hide them from view, allowing you to toggle the div's visibility.
Don't apply the "display: none" to the panel, only "visibility: hidden":
filterpanel.Attributes.Add("style", "visibilty: hidden");
This will hide your panel (the <div> I suppose) but reserve the required space (and therefore will allow the dimension-related properties of the corresponding DOM element to have the right values).
Of course you'll see an empty spot but you could probably resolve this issue by playing with the styles of an element (maybe by nesting the panel inside another element and by applying styles to that element instead of doing that on the panel itself).
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.
I have a modal popup that initially shows some content but expands a div if a checkbox is selected. The modal expands correctly but doesn't recenter unless you scroll up or down. Is there a javascript event I can tack on to my javascript function to recenter the entire modal?
Here is what it is:
$find('ModalPopupExtenderClientID')._layout();
For example:
$find('detailsPopUpExtenderId')._layout();
and in aspx:
<ccl:ModalPopupExtender runat="server" ID="MyPopUpExtender" TargetControlID="pop" PopupControlID="PopUp" BehaviorID="detailsPopUpExtenderId" BackgroundCssClass="ModalBackground" />
BehaviorID being the property where to set the clientside id.
Be careful that this isn't tied to the resize event of the window. If it is, your recentering could trigger a resize event in IE, which would cause an infinte loop.
If it is tied to the resize event, allow 1 or 2 resize events to occur, but then ignore the rest. (I say 2, because in IE, a "restore" event on the window will trigger at least 2 resize events (3 in IE6).
Whatever event you have bound to the scrolling to get it to re-center, bind that event to the checkbox/div expanding event as well (or call it from within the other event). Hard to say more without seeing some code.
I have one third party Popup to display message. It has two properties OffsetX and OffsetY. To set its position in browser.
Now i am invoking this Popup on Button Click event. I need this popup just next to my Button and for that i have to set above mentioned OffsetX and OffsetY properties of Popup.
I tried following code on Button's Click Event,
Popup.OffsetX = Button.Style.Item("Top")
Popup.OffsetY = Button.Style.Item("Left")
But values of Button.Style.Item("Top") and Button.Style.Item("Left") are always nothing and Popup always appear in Left Bottom corner due to value = nothing.
FYI, I did not set Top and Left from CSS. I just dragged the button from tool box.
The values of "Top" and "Left", unless explicitly defined in the CSS, won't be defined. Dragging controls onto the designer won't do that as the Top/Left positions can vary depending on the browser, the end users screen resolution (whether elements get re-positioned due to the width of the screen) and a number of other factors.
You'll probably need, from the sounds of it, to use a bit of client side javascript (if possible) to trigger the pop-up being shown and/or setting its Top and Left properties.