Define Container for SweetAlert to Gray-Mask - javascript

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?

Related

show popup with custom text before closing the page (modern browsers)

I have laravel project with react components.
There is a form on one page and I want to have a modal window displayed with "Save changes Yes/No" message, while user is closing the page.
As soon as I know this can be done in two ways:
By using Prompt from react-router package, but it seems that this won't work for me since I connect react component inside the laravel blade template, thus I don't use react-router.
By using the "beforeunload" event. Modern browsers don't support adjustable messages for the confirmation window and I need to display the adjustable message ("Save changes?").
Does anybody know another way how to track the page closing (or switching to another page) and display a popup window with custom text? Is that possible to display a custom modal window instead of the default confirmation one?

How to create a non-modal React dialog?

I'm working on a javascript React-based application running under nwjs.
My task is: on a button click, display scrollable instructions in a dialog that users can drag to a second monitor, so they can do their work in the main window, following the instructions in my new dialog.
I only know how to make modal dialogs with React. How do I make a non-modal dialog, so the user can scroll through the instructions as needed while they work in the main window?
Window you create trought react, must stay in browser window.
Call new child window so you get new window that can be dragged across
desktop.
Window.open(url, [options], [callback])
See documentation

How can I use two twitter bootstrap modals in succession?

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.

Is there a way to do an accessible modal?

I'm working on a project with Twitter Bootstrap and playing around the JavaScript components using a screen reader.
When I trigger the modal dialog, Jaws skips the modal going to the next link in the page.
Is there a way to implement a accessible modal?
Another solution that I think is to make a static page to the functionality of the modal, and redirect to this page when the user use a screen reader. Can I detected somehow if the user are using a screen reader?
EDIT 2019: N. Hoffmann wrote and maintains an accessible modal component both in vanilla JS (along other components in its van11y project) and jQuery.
Behavior and styles are easily modified via data-* attributes and classes.
It's been tested in way more conditions (screen readers, etc) that what you'd do with your own script ;-)
Also Bootstrap 4 has a fairly accessible modal and Bootstrap 3 in its latest versions (much or all of the Paypal Bootstrap accessibility plugin was backported to 3.3.x).
Modern ressources: Access & Use european initiative details a lot of interesting aspects in a simple manner and points to other resources, including the latest ARIA Deisgn Pattern.
Here's an accessible modal dialog: http://hanshillen.github.com/jqtest/#goto_dialog
Once the modal is activated, keyboard navigation is trapped inside the dialog till it's explicitly closed by the user.
http://irama.org/web/dhtml/lightbox/ details such an accessible implementation (there's little difference between a lightbox and a modal dialog, the important thing is the modal part and keyboard management).
You can also read in Unofficial copy of the DHTML Style Guide the dialog modal part and W3C/WAI-ARIA Making a Dialog Modal.
J. Wajsberg wrote a jQuery plugin able to trap the keyboard input inside a DOM element if you need a more DIY approach.
i don't know any solution to detected automatically if user using a screen reader. but there is the google solution to hide a link at the begining of the page (with left:-1000em and position:absolute) that can be activate if you use keyboard and display a "special mode".
Screen reader users, click here to turn off Google Instant.
for your modal dialog try to use aria and aria-atomic="true" aria-live="assertive" attribute on the dialog html div. it should announce the content of you dialog box.

Extension dialogs: across-session info, "pre-load" event and how to center startup dialog?

I am working on a small extension for personal consumption and practice. What I would like to do is provide some information every time Firefox starts using a modal dialog. I know this is generally frowned upon, but this is mostly for know-how. I have a few question regarding some things---I feel like there are better ways to do them. Kindly share your wisdom:
I have created a small dialog XUL, and I have an event listener registered to the load event of the main window. To actually display the dialog, I use:
window.openDialog("chrome://myext/content/prompt.xul", "dialogname",
"chrome,dialog,modal,centerscreen,resizable", params).focus();
Problem 1: I can never get the start up dialog to be on the center screen (even if I have centerscreen enabled), it starts top left---it would be nice to have it in the middle---something like Firefox's password-on-startup request. How can I achieve that?
I would like the modal window to open only once per session, even if there are multiple instances of Firefox. What I have done to accomplish that is, once the dialog runs, I set an extension preference, and I check that before opening another dialog on the "load" event of any new window.
Problem 2: To make sure I somehow don't have preferences set from a previous session, I try to check if this is the first window opened, and if so, I reset the preferences. Just to be safe, I also reset them on the unload event of the last window that closes. To discover the first/last load and unload, I use the nsIWindowWatcher service, and see if I can traverse the returned enumerator:
var ww = Components.classes["#mozilla.org/embedcomp/window-watcher;1"]
.getService(Components.interfaces.nsIWindowWatcher);
var en = ww.getWindowEnumerator();
var win1 = en.getNext();
//if there is no more en.getNext(), then this is the 1st window
There has to be a better way to do this, no? Some event which only fires once per session (not per window) for example?
If the dialog box is cancelled, I want Firefox to close down. Right now, I accomplish that through a simple window.close() associated with the cancel button of the dialog. However, since the original load (which triggered the modal dialog) is called after the page finishes loading, I can see a small glimpse of the homepage before it closes due to window.close()---this is not elegant. Is there an event similar to "before_page_load"? What is the proper way to accomplish this goal.
Once again, this is mostly for personal use, so kindly ignore the usability factor of a startup modal dialog.
You probably need to observe the final-ui-startup notification, which happens before the main window opens. You do this by registering a component to observe the profile-after-change notification, then during that notification, add yourself to observe the final-ui-startup notification. When your component subsequently receives that notification, it can then open your modal dialog and subsequently quit the application if necessary.

Categories