The Modal - the correct modal windows
Very often, modal windows and dialogs are made using jQuery plugins. For example, SimpleModal or jqModal . Unfortunately, all of them, in the default version, do not work correctly.
What is “right”?
A modal window, by definition, blocks the user's work with the parent window until the user closes it. I.e:
')
According to this principle, viewing photos on Facebook and Vkontakte works, and I think that this is the right option for modal windows.
In order not to torment you in advance with implementation details, I will first show the jQuery plugin demo: http://rmcreative.ru/playground/modals_plugin/demo.html .
Well, now a little about the implementation.
The idea is quite simple. In the open state, the markup is approximately as follows:
CSS is applied to it:
That's all. It remains to be wrapped in a convenient jQuery plugin for use and add buns like closing on ESC. I have a plugin with this API:
You can pick it up on github .
At the moment there are a number of bad things, which, I hope, the community will help:
Constructive criticism and advice are very welcome.
What is “right”?
A modal window, by definition, blocks the user's work with the parent window until the user closes it. I.e:
')
- The user should not be allowed to scroll the page under it.
- At the same time, if there is a lot of content in the modal window, you need to allow scrolling content.
According to this principle, viewing photos on Facebook and Vkontakte works, and I think that this is the right option for modal windows.
In order not to torment you in advance with implementation details, I will first show the jQuery plugin demo: http://rmcreative.ru/playground/modals_plugin/demo.html .
Well, now a little about the implementation.
The idea is quite simple. In the open state, the markup is approximately as follows:
<html> <head> ... </head> <body class="lock"> <div class="shim"> <div class="modal"> ... <h1>Hi, I'm the modal demo.</h1> ... </div> </div> ... </body> </html> CSS is applied to it:
/* . body, IE — html */ .lock { /* */ overflow: hidden; } /* ( ) */ .shim { /* , */ position: fixed; bottom: 0; left: 0; top: 0; right: 0; /* , */ overflow: auto; /* iPad*/ -webkit-overflow-scrolling: touch; } /* iPad */ .shim > * { -webkit-transform: translateZ(0px); } /* : */ .shim { background: rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6–IE8 */ zoom: 1; } That's all. It remains to be wrapped in a convenient jQuery plugin for use and add buns like closing on ESC. I have a plugin with this API:
$.modal().open({ onOpen: function(el, options){ $.get('http://example.com/', function(data){ el.html(data); }); } }); You can pick it up on github .
At the moment there are a number of bad things, which, I hope, the community will help:
- Scrolling with the keyboard in FF scrolls the page instead of the modal window.
- On the iPad, the scrolling is not very stable (sometimes scrolls the page).
- Scrolling with the middle mouse button does not work correctly.
- Opening a modal window shifts the page in the event that a scroll appears or is removed.
Constructive criticism and advice are very welcome.
Source: https://habr.com/ru/post/148515/
All Articles