I have a modal dialog form which has some "help links" within it which should open other non-modal panels or dialogs on top of it (while keeping the main dialog otherwise modal).
However, these always end up behind the mask. YUI seems to be recognizing the highest z-index out there and setting the mask and modal dialog to be higher than that.
If i wait to panel-ize the help content, then i can set those to have a higher z-index. So far, so good. The problem then is that fields within the secondary, non-modal dialogs are unfocusable. The modal dialog beneath them seems to somehow be preventing the focus from going to anything not in the initial, modal dialog.
It would also be acceptable if i could do this "dialog group modality" with jQuery, if YUI simply won't allow this.
Help!
By default, YUI manages the z-index of anything that extends YAHOO.widget.Overlay and uses an overlay panel. It does this through the YAHOO.widget.Overlay's "bringToTop" method. You can turn this off by simply changing the "bringToTop" method to be an empty function:
YAHOO.widget.Overlay.prototype.bringToTop = function() { };
That code would turn it off for good and you could just put this at the bottom of the container.js file. I find that approach to be a little bit too much of a sledge hammer approach, so we extend the YUI classes and after calling "super.constuctor" write:
this.bringToTop = function() { };
If you do this, you are essentially telling YUI that you will manage the z-indices of your elements yourself. That's probably fine, but something to consider before doing it.
The original dialog can't be modal if the user is supposed to interact with other elements—that's the definition of modal. Does the original dialog really need to be modal at all? If so, have you tried toggling the modal property of the original dialog before you open the other elements?
Related
when I use a KendoReact DropDownList into a ReactBootstrap Modal the expanded list appears UNDER the modal so it can't be interacted with.
I read several issues that was pointing to a focus loss, which is not exactly my case, due to the fact that Kendo PopUp was append to body instead of the Modal itself, and the 'appendTo' prop seems to be a good solution for me but it exists only for the Kendo PopUp component, not for the Kendo DropDownList one (which uses PopUp underlying)...
I've made a repo illustrating this issue : https://github.com/lePioo/react_kendo_dropdown_into_bootstrap_modal
And a LIVE demo for this repo (take some time to load):https://react-kendo-dropdown-into-boot.herokuapp.com/
Set bigger z-index for the animation container of the popup using CSS. And it will be on top of the modal to resolve it.
.k-animation-container{
z-index: 10000
}
Leave it to be rendered into the document. Since if you render it using appendTo to the Modal, the DropdDown will not be entirely visible when opened, or scrollbar will appear in your dialog. This is the purpose it is rendered into the document.
#Xizario's answer didn't work with V4.14.x
The solution that finally worked was to use ZIndexContext.Provider from '#progress/kendo-react-common':
<ZIndexContext.Provider value={10003}>
<DropDownList {...yourProps} />
</ZIndexContext.Provider
I have an angular/bootstrap app and the modal window of an app contains small textarea which can contain a lot of text that does not fit the size of textarea (and modal).
I would like to add some kind of button to the small modal window which would open new bigger popup/modal containing nicely formatted content of text area, like 90% of the screen.
I am not asking here for the code, but more like for the way how to approach the problem. I have already tried several approaches but I got stuck always.
Thanks a lot!
I would just use JavaScript to handle the click of your button to expand the modal size, by adding a class to your modal.
e.g. jQuery example:
$('.expand-modal').click(function() {
$('.modal').addClass('expanded');
});
And then just write some CSS for .modal.expanded where you ensure it's 90% of the screen size or whatever you want.
You would probably want another button to minimise the modal again, in which case you just do something like $('.modal').removeClass('expanded');
,
HI,
I need some ones help with this, thank you in advance.
In my site i have that when the user clicks on a input box then a new div opens up on top of the input box in that exact place.
Now i need to add that when that div opens i need the background of the hole screen to become black with some opacity, i think it is called overlay.
some thing like i want you can find here:
http://www.omnipotent.net/jquery.sparkline/
if you hover with the mouse over the div on the side that says "come work at splunk".
How can i do something like that with jquery or any thing else.
Thank you very much
You want to use the jQuery UI Dialog Modal.
Edit: jQuery's Dialog method will give you a similar effect but is usually used for onclick events rather than mouseover/mouseout. Have a look at the javascript code on the page you linked (around line 356) and you'll see:
$('#splunkjobs').mouseenter(function() {
// make element absolute, positioned over the top of the float and resize
$('<div id="shade"></div>').
appendTo('body').
css('height', $(document).height()).
animate({opacity: 0.6});
This essentially creates a that covers the page and then fades it in.
I still think using a Dialog for your button is preferred (and much simpler).
this is caled 'modal', you can use jquery:
http://jqueryui.com/demos/dialog/#modal
http://www.queness.com/resources/html/modal/jquery-modal-window.html
http://dev.iceburg.net/jquery/jqModal/#examples
or if you still need more:
http://coderplus.com/2009/11/jquery-modal-boxes-to-improve-your-ui/
I'm using qTip to show validation errors in a grid. The tooltip appears after a failed row save and doesn't disappear until the row is resaved or the changes are canceled.
The problem with this is that opening a dialog while the tooltip is visible causes the tooltip to be rendered on top of the dialog. That is because the z-index is hard-coded to 6000+ for all tooltips, while jQuery dialogs are set to 1000+.
I could fix this problem by changing the hard-coded value in qTip to <1000, but then tooltips fired from the dialog will appear behind the dialog.
Is there anything I can do, aside from changing the qTip code or using a different tooltip library?
Completely untested, but you might be able to put something together like this:
Hack the base qTip z-index so the tips will appear below the jQuery dialogs.
Use the qTip onRender callback to selectively raise the z-index of tips triggered only from within those dialogs so they are above the 1000 range.
As a side note, it looks like the current version of qTip actually uses 15000 as its base z-index.
Why not make the dialog's z-index 6500, and then give all qTips fired from the dialog a z-index of 7000?
Edit: Oh, you still can't set qTip's z-index on a per-tooltip basis. Rats. Perhaps hide all the existing tooltips when the dialog is shown, and re-show them when it closes?
I'm interested in alert boxes such as,
http://www.visual-blast.com/javascript/nice-alert-box-with-jquery-impromptu/
and
http://woork.blogspot.com/2008/08/design-stunning-alert-box-using.html
but with a different functionality, the user should be able to interact with the page even with the alert box present, so it needs to be movable and not obscure the underlying page, as in this example,
http://www.open-lab.com/mb.ideas/index.html
Alert box should be generated automatically on page view plus the title and message of the alert box should change with each page refresh from expandable library.
Is there anything out there like this?
Thanks
Sounds like the jQuery UI dialog widget might do what you need?
http://jqueryui.com/demos/dialog/
Here is an example with mootools. You easily can extend any element on the page to be draggable. You may use this plugin as a sample of alerts and you'll just need to remove some functionality and add make it draggable.
There are few custom dialogs in moo.rd. One of them is the Custom.Alert:
http://www.moord.it/examples/custom_alert