Placez une boîte de dialogue dans le centre de la région visible d'une fenêtre de navigateur en utilisant JavaScript / DOM
-
29-09-2019 - |
Question
Je dois placer une boîte de dialogue (lire div) dans le centre de la région visible d'une fenêtre de navigateur. Je dois utiliser DOM javascript pour ce faire - faire usage de scrollHeight, scrollTop, clientHeight, etc. est autorisée. Les besoins de la boîte de dialogue pour apparaître après avoir cliqué sur un lien, il reste par ailleurs invisible.
NE PEUT PAS UTILISER JQUERY CRÉER UN MODAL DIALOG.
aide quelqu'un peut me avec la partie de centrage de ce problème
Cordialement
La solution
(function () {
var getVieportWidth,
getViewportHeight;
if (window.innerWidth) {
// All browsers except IE
getViewportWidth = function() { return window.innerWidth; };
getViewportHeight = function() { return window.innerHeight; };
}
else if (document.documentElement && document.documentElement.clientWidth) {
// IE6 with DOCTYPE
getViewportWidth = function() { return document.documentElement.clientWidth; };
getViewportHeight = function() { return document.documentElement.clientHeight; };
}
else if (document.body.clientWidth) {
// IE4, IE5, IE6 without DOCTYPE
getViewportWidth = function() { return document.body.clientWidth; };
getViewportHeight = function() { return document.body.clientHeight; };
}
var dialogDIVNode = document.getElementById('someID'),
dialogDIVNodeWidth = dialogDIVNode.offsetWidth,
dialogDIVNodeHeight = dialogDIVNode.offsetHeight;
document.getElementById('someLinkID').addEventListener('click', function (e) {
e.preventDefault();
dialogDIVNode.style.left = ( getViewportWidth() / 2 - dialogDIVNodeWidth / 2 ) + 'px';
dialogDIVNode.style.top = ( getViewportHeight() / 2 - dialogDIVNodeHeight / 2) + 'px';
dialogDIVNode.style.display = 'block';
}, false);
}());
Autres conseils
Voici comment centrer avec succès une boîte de dialogue, quelle que soit la position dans le document:
dialogue.style.left = window.innerWidth - (window.innerWidth - dialogue.offsetWidth) / 2
- dialogue.offsetWidth + pageXOffset;
dialogue.style.top = window.innerHeight - (window.innerHeight - dialogue.offsetHeight) / 2
- dialogue.offsetHeight / 2 + pageYOffset;
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow