Pressing Back button in Google Plus will show this nice Div, instead of the ugly alert box, how is this achievable? Notice the URL has not change when press 'Back'.
Thanks.
Edit:
I should be more specific in my question. I am not interested at how sexy the pop-up modal, but I am looking for method or API to hijack the back button behavior.
Google uses their own material design for all their products, its nothing but a simple dialog box with material design css.
some third party websites offer this design for free, in that http://getmdl.io has all type of components for any design
Check the Dialog here and here
<!-- http://codepen.io/... -->
Related
I'm want to use the mobiscroll selector (demo | source) on my (desktop oriented) website. I've got a basic version working here. The way that works is that when you click the input at the top, it loads the (enormously sexy) spinner as an overlay with a dark layer over the rest of the site (try it out).
What I would rather have instead of this behaviour though, is that on my desktop website it shows this spinner instead of the input. So not as an overlay, but integrated with the rest of the design without needing to click to bring it up. That way the user is saved one click and it is immediately clear what's expected of him or her.
Does anybody know how I would be able to use this spinner instead of the input, so that it integrates nicely with the rest of my page instead of working as some sort of pop-up/overlay?
All tips are welcome!
You can use it display: 'modal' on mobile and use it in display: 'inline' on desktop. You'll find more info about the display option that you can pass on init in the documentation.
Now you just need to detect if your users are browsing from a mobile device or a desktop. You have a couple of options there, this would be one approach.
Currently the functionality in my asp.net project is as follows:
A user controls is opened in showmodaldialog. The user does some functionality. But as the showmodaldialog is an window, it has close(x) button. Upon clicking of this close(x) button I have written window.onbeforeunload function which displays a message to user as a warning. And asks him to click on either on OK or Cancel buttons which are default in confirmation box that is shown in window.onbeforeunload.
But now I want to replace this functionality with something better. I want to display my own custom dialog with custom buttons with their own custom functionality.
Basically I want to make sure that once user starts the functionality in the user control, he should finish it and if he clicks on close(x) button he is to be shown my new custom dialog and need to prevent him from closing showmodaldialog.
Can anyone please suggest something which I can use in my situation?
Thank you.
Sorry for the title couldn't come with a better one...Okay here's is my doubt, when we display a javascript alert using alert("Some text") we see the alert dialog , Now the enter UI except the dialog box is unresponsive unless we hit Ok or close the alert window, Same goes for the confirm dialog. I am trying to build a widget to display my custom Confirm dialog using HTML elements but I don't know how to block the UI, The user if he wants can ignore the dialog & click other elements on the UI, Any suggestions or workarounds on blocking?
You could build a simple overlay with your dialog. Your dialog could be absolutely positioned on the screen, allowing users to either click it or other elments to the side of it.
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
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.
I'm writing a plugin for Google chrome that works similarly to the Adobe's web-capture plugin for Mozilla Firefox. I need some help designing the UI for the extension. As of now, the extension has a button, next to the wrench icon, that, when clicked, converts the page to a PDF file. I need to add a drop-down menu, just as it is on Firefox, which should display other options for conversion, and providing the same functions in context menu as well. I'm not sure if it's possible to have a main button and a drop-down menu button, where the main button initiates conversion directly, and the drop-down menu button shows the drop down menu showing other options, in Google Chrome as nothing is mentioned about it's possibility on the Chrome Extension development page. I could probably have a pop-up page but that would come up when I would click the main button. Could someone help me with this? If it is possible to have a both main button, and a drop-down menu button, then how should I go about doing it? Or if it is that I would have to use a pop-up page to show the options, then where should I place my functions, which will be used by context menu APIs as well.
As far as i understand i wouldn't prefer having 2 buttons. What you can do is, have a drop down button and once that appears after clicking, you can have a big button inside that saying "PDFy my current page" and below you can have rest of the options. I guess having two button will unnecessarily bring confusion and will make browser cluttered.