I'm trying to show an image with nyromodal. I'm trying to do from a jquery-ui dialog, but the nyromodal is showing behind the dialog.
How can I change so the image goes to the front?
You can try to add the properties z-index in nyroModal.css.
I added the z-index in .nyroModalBg, .nyroModalCloseButton, .nyroModalTitle, .nyroModalCont, .nyroModalCont iframe, .nyroModalLoad to solve similar problems.
Related
I'm using Primefaces 5.3, and AdminLTE 2 as a template for my website (Which based on bootsrap).
The problem is when I open a dialog box, this dialog gets hidden by the top navbar, and this topbar doesn't get disabled I can still click on its links.
[![enter image description here][2]][2]
As you can see in that picture a portion of the dialog box is hidden by the top nav bar.
How can I solve this problem ?
Without a sample code to work and check your issue. Here is a probable solution that i can suggest to you. Check the z-index of the navbar and the dialog. Try setting z-index for both where the dialog box z-index value is greater than the navbar.
I'm wondering whether I can use the "same" icon (or something that looks the same) that triggers a full-screen, semi-transparent Bootstrap modal (that I have customized) to pop up and then close it with an icon that is in the same location.
However, say it is initially a hamburger icon on the normal page, when I click the icon to pop up the modal menu, it is now under the modal. Is there a way to have it stay on top of even a modal? I tried z-index but I couldn't get it to work.
The tricky thing for me is that I wanted to have the icon transition from a hamburger to an X and then vice versa when it closed: http://sarasoueidan.com/blog/navicon-transformicons/
Initially I was hoping I could get the icon to transition and then somehow set the icon to layer on top of everything, including modals.
Any ideas or suggestions would be great, thank you.
It should be possible to do this with z-index. However, z-index only works with elements that have "position" set to something other than "static" (the default). Try adding position: relative to your open / close button and hopefully then you should be able to use z-index to keep the button in front of the overlay.
There's a good reference with more info about z-index on CSS Tricks.
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 want to add minmun/maximum button on tabnavigator header.......how i could be possible
put the tab navigator and a button in a canvas
set the X and Y of button Y=0 and X=tabnavigator.width - button-width-10
on click of button use Resize function set HeightTo=0 and heightFrom= tabnavigator.width
then play() the resize
to restore heightFrom=0 and heightTo=previous size of navigator
then you got the illusion of minimizing ang maxizing the tab navigator.. please do add some more effects of your desire..
Hope this gives you a idea on it..
Forget how it looks at first. Create a button that simply hides the TabNavigator. I'm sure there are plenty of tutorials out there on how to animate show/hide. Once you have that, move the button where you want it and style it as you wish.
Ive never heard of a tabNavigator header, but if you mean adding buttons to the tabs themselves, then theres an example and source code you could work from with FlexLib SuperTabNavigator
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.