This is a minor, subtle point, but in UX, subtlety makes all the difference.
I have crafted a 1-page web app using Twitter bootstrap. In one particularly important part of my application...
My user takes an action,
I present a Confirmation dialog (technically a bootbox confirm)
The user clicks OK to confirm
the modal disappears, an action via ajax takes place,
then I display a secondary modal (bootbox dialog) with a success message.
What I am trying to do is change step 4. I don't want the darkened overlay to disappear, only the dialog box itself. Instead, I would like to leave the background dimmed and display a spinner (spin.js of course) that will be replaced by the success modal upon ajax completion.
In short, I think I may need to override the default behavior of the success method of bootbox confirm.
Is this possible?
It should work if you listen for the close event on the first modal
$(document).on('close', '#firstModalId', function(){
$('#secondModalId').modal('show');
});
You can also try the closed event. If timed right the user shouldn't see both at the same time and they shouldn't see one disappear when the other opens. Be careful of crashing IE when using two bootstrap modals at the same time.
One other possibility I've used is to open the second modal without a backdrop and at the same time changing the z-index of the first modal so it looks like it's gone. When the second modal closes you can either return the first modal to its original z-index or close it like normal. Whether you can take this route depends on whether or not you want the backdrop click behavior in the second modal.
Related
In react-native app I have a component which show some data. In this component there is modal, that shows on button press with some detailed data. And in this modal I have a button to show another modal with some specific data.
Something like this:
MainComponent->ModalWithSomeColorSettings->ModalWithColorPickerForCurrentElement.
In Android version threre is right order by show on modal by overlap another by default. And if I open one modal, that shows. If in that modal press button to show second modal, that modal shows and overlap previos. If I close last, there is still first one modal on the screen.
But in ios version if I open first modal, then open another, second modal did not show itself. Then if I close first modal, I can see second modal on screen. It's look like order multiple modals in android is different to ios order. First overlap second, instead second overlap first.
Did anyone know is there possible or not to change modals order in ios from react native? Or I need create component to show some specific data instead do it in modals? It's more helpful to stay with modals with my case, because in main component and first modals I have some fetch data from server and don't want to download this data every time when rollback to main component.
I have a page where if user click anywhere outside form or try to close the tab a dialog box/popup should come like your changes will be discard or do you want to move.
I can do this from window.onbeforeunload event but the problem is that i need to use a customized pretty dialog box instead of default one if any alternate approach is there.
If we use any modal dialog box but i don't know which event to call on that dialog also tried window.onload but it not fulfill my problem as i need to ask the viewer before moving to other page.
I'm using SweetAlert to display a success or error for a structured JSON result. The swal call is made from actions the users takes against a modal window already on top of the document window. From a UX perspective, it is expected that SweetAlert would gray-out the modal window, however, because SweetAlert (and the calling Javascript) resides at the document level, the document window (and not the modal window) is grayed by SweetAlert.
Not only is it preferable to gray-out the modal window because this is where the action originated, but having the gray-mask applied to the element/container directly behind the SweetAlert allows it to stand out from the rest of the page. In the picture below, you can see how the SweetAlert blends into the page without the gray-mask properly applied to whatever container is behind it.
(It should not matter, but to stem the inevitable question: the modal window is created using the Kendo UI Window widget)
I do not see any configurable options in the SweetAlert API which would allow me to pass in an optional container for gray-masking. Is there any known way to tell SweetAlert which container it should use to gray-mask?
I am trying to implement multiple level of jQuery Dialog with modal behavior. I have main page which open up first dialog box from where second dialog box can be open all both should be modal box.
First issue is I am getting error on fiddle when clicking main page link and second its not creating dialog as required.
Fiddle
A bunch of things going on:
In the jsFiddle, you need to add jQuery UI and a theme as external resources. Selecting just the jQuery library is not enough. jQuery UI Dialog is part of the jQuery UI library, not part of the jQuery core library.
Since your click events are on <a> tags, you need to cancel their default behaviour. Make a click handler for your <a> tags, and cancel the default behaviour first before doing anything else:
Gold
$("#clickForGold").on("click", function(e) {
e.preventDefault(); <--- this stops the link from navigating
//now do other stuff
});
Set up your dialogs at page load, and then open them when you need to. Use the autoOpen:false parameter to keep them from opening when the page loads. Open them as follows:
$("dialog-id").dialog("open");
Don't open a modal over a modal. It's extremely poor for usability. Close the first one before opening the second one:
function clickForSecond() {
$("dialog-id-first").dialog("close");
$("dialog-id-second").dialog("open");
}
A working example:
https://jsfiddle.net/5ucat3f7/1/
I'm not sure I've diagnosed this problem correctly.
I have a jquery dialogue that pops up another jquery dialog. When I pop up the inner dialog
once everything seems to work. when I close both dialogues and reopen them the "save" button on the
inner dialogue does not work right -- in particular it doesn't close the dialog.
What I think is happening: The second time the content for the second dialogue is reloaded
via AJAX using the same DOM id's as the first time, and when jquery tries to close the dialogue
it tries to close the "old" dialogue which no longer exists (or at least is not visible).
Am I right? If so how to get jquery to forget the old element and use the new one?
If you want to see the problem yourself:
go to http://ibidreview.appspot.com/Teach/Edit?eid=1DemoE&owner=
click the first "change question" button. First dialog should show.
click the "html" pseudo-link. Second dialog should show.
click "save" on inner dialog. Inner dialog should close
click "change" on first dialog. First dialog should close.
Now repeat steps 2,3,4 and notice that on step 4 the inner dialog does not close.
I will stop trying to fix this for a while so the steps will work the same... Thanks in advance!
Take a look at the live() event handler. This will ensure that the element will still fire the event after being destroyed or recreated. http://api.jquery.com/live/
Use something like this:
$(button).live('click', function() {
$(form).save(); //save the form
$(menu).close(); //close the menu
});