Scrolling becomes disabled when opening a jQuery UI dialog, even when it's open as non Modal.
It doesn't seem to be any option to control this behaviour.
How to prevent that?
I've found a working solution myself.
Just after opening the dialog, add this piece of code:
$("html,body").css("scroll", "auto");
IMO, it has no sense at all to block scrolling when opening a non modal dialog. I'd say this is a bug or a missunderstanding of what a non-modal dialog is.
Related
I used bootstrap 3 modal dialog for search function in my asp.net inventory application.When I press the search button on my modal content whole popup up dialog went disappeared.I want to lock the the modal dialog in my current page window.How can I resolve this using bootstrap.I tried putting data-backdrop: static.But it's still not work for me.
Try also passing the
{keyboard: false}
Option as well as data-backdrop: false. Technically speaking data-backdrop should be solving your problem. Is theres something that makes your project unique?
Page.ClientScript.RegisterStartupScript(this.GetType(), "Alert", "JavaScript:alert('MY Message')", true);
Above code shows message box on top of the page , but I want it to the center of the page.
Alert boxes by default open at the center. Look at #Tomzan's comment, you are probably getting it at the top for just Chrome.
As far as I know it's not possible to make any modifications to that. If you want a custom alert box look into using jQuery ui. It'll allow you to put a messagebox wherever you want.
jQuery ui dialog box
The alert('message') is dialog box shown by browser, with very little to no control over its positioning.
Instead you can use jquery ui dialog to show your message. There are 'n' number of jquery plugins which are available to show the alert messages.
And of course you can control the positioning dialogs of these custom dialogs.
http://jqueryui.com/dialog/
http://needim.github.io/noty/
http://jquery-plugins.net/tag/alert-box
I put together a page that shows what's happening here. The dialog is a confirmation that an email was sent, so you'll need to fill out the form to get the dialog to pop up. (I wanted to retain as much as the original functionality as possible.)
I generated a UI theme using Themeroller and the dialog I'm using is completely void of all styling. To the point that the dialog is completely transparent and all that shows in the dialog is the text in the dialog's div and the unstyled close buttons.
I tried both the compressed and un-compressed UI css and js files with no change.
I'm using some UI effects elsewhere in the same site (highlighting, etc), and they work fine.
Is this an issue with the Themeroller generator or am I missing something?
For now I can just display a label with a confirmation message, but I'd really like to use a dialog.
You haven't linked to the jQuery UI css anywhere. Here's a screenshot of the page after I injected the base jQuery UI theme.
I have next problem:
I have one modal dialog over main app, but I need to show help dialog of that modal dialog in front of anything (even that modal dialog).
Is there a way to accomplish this without making my modal dialog non-modal.
Thanks
If the help dialog would be in front of the modal dialog, how could the user close the modal dialog? The user could not interact with the help dialog in any way. I wouldn't recommend making a user interface that works differently than all other similar interfaces with modal dialogs.
Maybe you could move the help text from the help dialog to the modal dialog?
Just create another modal style dialog for the help dialog from within the dialog you've already created. You couldn't select select help from anything but that anyway.
I have an ASP.NET C# page, with image thumbnails in it.
I created a script that opens a jQuery UI Dialog on each hover on a thumbnail that shows me the thumbnail in larger size in a dialog view, and when I hover out - dialog closes.
My little annoying problem is, that in every mouseover (trigger dialog to open) - the page makes itself 'longer' - a scrollbar appears on the side of the browser, and it seems like the page gets longer when a dialog is openning, but it shouldn't do so.
When I hover off (mouseout) - the dialog disappears and the page returns to its normal state.
Because of this- when I hover through the thumbnails, my page 'jumps'.
I looked for a solution for this, and I've added return false; for each dialog open, and close - and it still doesn't make any different.
Sorry for the unperfect english, and thanks for all helpers!
I finally got my solution - for all interested:
open: function(event, ui){
/*
* Scrollbar fix
*/
$('body').css('overflow','hidden');
}
I added this to dialog's opening event and it fixed the issue!