Comments (1)
I resolve as follows:
I edited this code https://github.com/nico3333fr/van11y-accessible-modal-window-aria/blob/master/src/van11y-accessible-modal-window-aria.es6.js.
I changed the onLoad method of:
const onLoad = () => {
attach();
document.removeEventListener('DOMContentLoaded', onLoad);
}
for:
const onLoad = () => {
attach();
document.removeEventListener('DOMContentLoaded', onLoad);
let modalConfig = document.getElementById('openModal');
if (modalConfig) {
let setModal = {
backgroundEnabled: modalConfig.getAttribute('data-modal-content-id'),
modalCloseImgPath: modalConfig.getAttribute('data-modal-close-img'),
modalCloseText: modalConfig.getAttribute('data-modal-close-text'),
modalCloseTitle: modalConfig.getAttribute('data-modal-close-title'),
modalContentId: modalConfig.getAttribute('data-modal-content-id'),
modalDescribedById: modalConfig.getAttribute('data-modal-describedby-id'),
modalFocusBackId: modalConfig.getAttribute('data-focus-back'),
modalPrefixClass: modalConfig.getAttribute('data-modal-prefix-class'),
modalText: modalConfig.getAttribute('data-modal-text'),
modalTitle: modalConfig.getAttribute('data-modal-title')
};
openModal(setModal);
}
};
and include openModal:
let openModal = (setModal) => {
let body = doc.querySelector('body');
body.insertAdjacentHTML('beforeEnd', createOverlay({
backgroundEnabled: "",
prefixClass: setModal.modalPrefixClass,
text: setModal.modalCloseText
}));
// insert modal
body.insertAdjacentHTML('beforeEnd', createModal(setModal));
};
If you insert an ID="openModal" with parameters the modal opens automatically:
<div id="openModal"
data-modal-prefix-class="simple-animated-"
data-modal-content-id="initial_modal_exec"
data-modal-title="My automatic modal"
data-modal-text=""
data-modal-close-text="Close"
data-modal-close-title="Close"
data-focus-back="klsadf"
data-modal-close-img="close.svg"
data-modal-describedby-id="">
<div id="initial_modal_exec" class="hidden">
<p>Yeah, with <abbr title="Cascading Style Sheet">CSS</abbr> transforms, it is smoother.</p>
</div>
</div>
[van11y-accessible-modal-window-aria.min_1530368048.zip](https://github.com/nico3333fr/van11y-accessible-modal-window-aria/files/3298149/van11y-accessible-modal-window-aria.min_1530368048.zip)
from van11y-accessible-modal-window-aria.
Related Issues (20)
- ability to add aria-describedby on the modal HOT 4
- Issue with role="document" on the modal HOT 3
- Bad CSS namespacing for close button and close image
- Allow choice of when to begin rendering modal
- Modal : callback après ouverture ? HOT 2
- Provide a function to display a modal window HOT 1
- Conflit entre`.no-scroll` et `overflow-x: hidden;` sur `html`
- Modals within modals
- How to re bind js when opened in modal and when closing
- Focus trap goes out of modal when the modal content is an iframe
- Set class per modal HOT 1
- Apostrophe in data-modal-text HOT 2
- Error : Vite + van11y-accessible-modal HOT 3
- Invalid License Format HOT 4
- Dépassement du viewport HOT 3
- Cannot specify initial focus HOT 2
- Cannot change tab order HOT 1
- data-modal-background-click="disabled" extended HOT 4
- Modal auto opening HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from van11y-accessible-modal-window-aria.