googlechrome
/
dialog-polyfill
зеркало из https://github.com/GoogleChrome/dialog-polyfill.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

update README

This commit is contained in:
Sam Thorogood 2020-07-27 10:23:15 +10:00
Родитель 007fc3a91d
Коммит aa1dbd3d9c
1 изменённых файлов: 10 добавлений и 5 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

15
README.md
Просмотреть файл

@ -1,5 +1,5 @@
dialog-polyfill.js is a polyfill for `<dialog>` and `<form method="dialog">`. dialog-polyfill.js is a polyfill for `<dialog>` and `<form method="dialog">`.
Check out [some demos](http://demo.agektmr.com/dialog/)! Check out [some demos](https://googlechrome.github.io/dialog-polyfill/)!
`<dialog>` is an element for a popup box in a web page, including a modal option which will make the rest of the page inert during use. `<dialog>` is an element for a popup box in a web page, including a modal option which will make the rest of the page inert during use.
This could be useful to block a user's interaction until they give you a response, or to confirm an action. This could be useful to block a user's interaction until they give you a response, or to confirm an action.
@ -16,7 +16,7 @@ You may optionally install via NPM -
There are several ways that to include the dialog polyfill: There are several ways that to include the dialog polyfill:
* include `dialog-polyfill.js` script directly in your HTML, which exposes a global `dialogPolyfill` function. * include `dist/dialog-polyfill.js` script directly in your HTML, which exposes a global `dialogPolyfill` function.
* `import` (es modules) * `import` (es modules)
* `require` (commonjs/node) * `require` (commonjs/node)
@ -39,11 +39,13 @@ const dialogPolyfill = require('dialog-polyfill')
### Supports ### Supports
This polyfill works on modern versions of all major browsers. It also supports IE9 and above. This polyfill works on modern versions of all major browsers.
It also supports IE9 and above.
It can work when used inside Shadow DOM, but it's not recommended.
### Steps ### Steps
1. Include the CSS in the `<head>` of your document, and the Javascript anywhere before referencing `dialogPolyfill`. 1. Include the CSS in the `<head>` of your document, and the JS anywhere before referencing `dialogPolyfill`.
2. Create your dialog elements within the document. See [limitations](#limitations) for more details. 2. Create your dialog elements within the document. See [limitations](#limitations) for more details.
3. Register the elements using `dialogPolyfill.registerDialog()`, passing it one node at a time. This polyfill won't replace native support. 3. Register the elements using `dialogPolyfill.registerDialog()`, passing it one node at a time. This polyfill won't replace native support.
4. Use your `<dialog>` elements! 4. Use your `<dialog>` elements!
@ -65,7 +67,7 @@ This polyfill works on modern versions of all major browsers. It also supports I
<script> <script>
var dialog = document.querySelector('dialog'); var dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog); dialogPolyfill.registerDialog(dialog);
// Now dialog acts like a native <dialog>. // Now dialog always acts like a native <dialog>.
dialog.showModal(); dialog.showModal();
</script> </script>
</body> </body>
@ -114,6 +116,9 @@ dialog {
} }
``` ```
This is also provided as a helper CSS class in the polyfill CSS, `.fixed`.
You can apply by using HTML like `<dialog class="fixed">`.
## Extensions ## Extensions
### Focus ### Focus