Besoin d'aide pour afficher le contenu du bouton inscription
Résolu
momo
-
momo -
momo -
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
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:
- Besoin d'aide pour afficher le contenu du bouton inscription
- Wetransfer gratuit sans inscription - Guide
- Twitter inscription - Guide
- Tchat gratuit sans inscription - Accueil - Réseaux sociaux
- Paypal inscription - Guide
- Instagram inscription - Guide
2 réponses
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)
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)