Giter VIP home page Giter VIP logo

Comments (1)

RogerMoreno avatar RogerMoreno commented on May 27, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.