Modal auto opening

[Diemsy]

Bonjour,

Tout d'abord merci pour ce super plugin qui marche à merveille.

Je cherche néanmoins un moyen de pouvoir gérer une ouverture de la modale sans passer par un trigger click sur le button mais avoir une fonction qui détectera son ouverture.

j'espère que c'est assez clair.

Merci d'avance

[nico3333fr]

Bonjour,

autant pour moi, je ne suis pas sûr d'avoir compris : l'idée c'est de pouvoir ouvrir la modale sans cliquer sur le bouton d'ouverture ou de détecter qu'elle a été ouverte ?

[Diemsy]

Oui c'est l'idée,
j'aimerais pouvoir ouvrir une seconde modale au sein d'un callback.

Pour être plus précis j'ai un champ d'inscription newsletter.

je saisis mon adresse mail et au submit une première modal s'affiche avec des champs d'infos supplémentaire ainsi qu'un champ mail avec mon adresse saisi

au submit de mon form je check si l'adresse mail est valid, utilisé ou non et en cas d'erreur je rouvre la modale avec le form et au success une autre modale avec un message de success.

Merci beaucoup

[RogerMoreno]

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:

Yeah, with CSS transforms, it is smoother.

van11y-accessible-modal-window-aria.min_1530368048.zip

[RogerMoreno]

<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>