Besoin d'aide pour afficher le contenu du bouton inscription

Résolu/Fermé
momo - 7 avril 2019 à 05:32
 momo - 7 avril 2019 à 20:18
bonsoir
j'aurais besoin d'aide.
j'ai créer 2 modals avec des script différend
celui de la connexion est passé
mais quand je clique sur le bouton inscription mon modal n'apparait pas

voila mon code pour plus de details

<div class="modal fade" id="S'identifier" tabindex="-1" role="dialog" aria-modal="true"
aria-hidden="true" >

<div class="modal-dialog" role="document" style="flex: 1; max-width: 48rem; margin: auto; padding: 2.4rem; background-color: white; " >
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="S'identifier">Inscription</h4>
</div>
<div class="modal-body">
<form action="" method="POST">
<div class="form-group">
<label for="text" class="control-label">Nom:</label>
<input type="text" class="form-control" id="nom" required="required">
</div>
<div class="form-group">
<label for="text" class="control-label">prénom:</label>
<input type="text" class="form-control" id="prénom" required="required">
</div>
<div class="form-group">
<label for="email" class="control-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="***@***" required="required">
</div>
<div class="form-group">
<label for="pwd" class="control-label">mot de passe:</label>
<input type="password" class="form-control" id="pwd" required="required">
</div>
<div class="form-group">
<label for="pwd" class="control-label">Répéter le mot de passe:</label>
<input type="password" class="form-control" id="pwd" required="required">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-danger btn xs" type="button" data-dismiss="modal"><i class="icon icon-times icon-lg"></i> Fermer</button>
<button type="submit" class="btn btn-success btn-xs">envoyer</button>
</div>
</div>
</div>
</div>

voila le code js que j'ai mis

const triggers = document.querySelectorAll('[aria-haspopup="dialog"]');
const doc = document.querySelector('.js-inscrip');
const focusableElementsArray = [
'[href]',
'button:not([disabled])',
'input:not([disabled])',
'select:not([disabled])',
'textarea:not([disabled])',
'[tabindex]:not([tabindex="-1"])',
];
const keyCodes = {
tab: 9,
enter: 13,
escape: 27,
};

const open = function (dialog) {
const focusableElements = dialog.querySelectorAll(focusableElementsArray);
const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];

dialog.setAttribute('aria-hidden', false);
doc.setAttribute('aria-hidden', true);

// return if no focusable element
if (!firstFocusableElement) {
return;
}

window.setTimeout(() => {
firstFocusableElement.focus();

// trapping focus inside the dialog
focusableElements.forEach((focusableElement) => {
if (focusableElement.addEventListener) {
focusableElement.addEventListener('keydown', (event) => {
const tab = event.which === keyCodes.tab;

if (!tab) {
return;
}

if (event.shiftKey) {
if (event.target === firstFocusableElement) { // shift + tab
event.preventDefault();

lastFocusableElement.focus();
}
} else if (event.target === lastFocusableElement) { // tab
event.preventDefault();

firstFocusableElement.focus();
}
});
}
});
}, 100);
};

const close = function (dialog, trigger) {
dialog.setAttribute('aria-hidden', true);
doc.setAttribute('aria-hidden', false);

// restoring focus
trigger.focus();
};

triggers.forEach((trigger) => {
const dialog = document.getElementById(trigger.getAttribute('aria-controls'));
const dismissTriggers = dialog.querySelectorAll('[data-dismiss]');

// open dialog
trigger.addEventListener('click', (event) => {
event.preventDefault();

open(dialog);
});

trigger.addEventListener('keydown', (event) => {
if (event.which === keyCodes.enter) {
event.preventDefault();

open(dialog);
}
});

// close dialog
dialog.addEventListener('keydown', (event) => {
if (event.which === keyCodes.escape) {
close(dialog, trigger);
}
});

dismissTriggers.forEach((dismissTrigger) => {
const dismissDialog = document.getElementById(dismissTrigger.dataset.dismiss);

dismissTrigger.addEventListener('click', (event) => {
event.preventDefault();

close(dismissDialog, trigger);
});
});

window.addEventListener('click', (event) => {
if (event.target === dialog) {
close(dialog, trigger);
}
});
});

je voudrais savoir comment changer cela merci
A voir également:

2 réponses

jordane45 Messages postés 38136 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 avril 2024 4 649
7 avril 2019 à 07:21
Bonjour

Déjà, à l'avenir, pour poster ton code, merci de le faire en utilisant les BALISES DE CODE.
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, sans regarder plus loin, je vois déjà un premier souci :
Tu as utilisé le même ID à deux endroits différents...
De plus tes ID contiennent des apostrophes....

Rappel : un ID doit être UNIQUE et ne contenir aucun caractère spécial.

Il faudrait également que tu regardes dans la console de ton navigateur si il n'y a pas des erreurs d'affichées ( y compris quand tu cliques sur le bouton pour ouvrir ta modal)


0
merci beaucoup j'avais un soucis d'apostrophe
0