Créer un compte
Connexion

Ouvrir une nouvelle fenêtre (Pop-up) et la centrer en javascript


Ouvrir une nouvelle fenêtre (Pop-up) et la centrer en javascript Ouvrir une nouvelle fenêtre (Pop-up) et la centrer en javascript Le 29/07/2013 à 04:51:03
Note: 4/5
Mots clés: ouvrir une nouvelle fenêtre centrer top left milieu window javascript pop-up milieu en js nouvelles centrer fenêtre pop-up en javascript navigateur window.open nouvelle fenêtre pop-up centrée

Bonjour,
dans ce script, je vais vous montrer comment ouvrir une nouvelle fenêtre(pop-up) et la centrer en javascript.

Pour centrer la fenêtre, nous allons simplement utiliser un peu de mathématiques pour trouver la position du centre.

Nous allons utiliser la méthode window.open pour ouvrir la nouvelle fenêtre. Mais pour plus d'informations sur cette dernière, regardez ce tutoriel:
Ouvrir une nouvelle fenêtre (Pop-up) en javascript

Donc voici le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ouvrir une pop-up et la centrer en javascript</title>
<script type="text/javascript">
<!--
function open_infos()
{
width = 300;
height = 200;
if(window.innerWidth)
{
var left = (window.innerWidth-width)/2;
var top = (window.innerHeight-height)/2;
}
else
{
var left = (document.body.clientWidth-width)/2;
var top = (document.body.clientHeight-height)/2;
}
window.open('pageb.html','nom_de_ma_popup','menubar=no, scrollbars=no, top='+top+', left='+left+', width='+width+', height='+height+'');
}
-->
</script>
</head>
<body>
<a href="#null" onclick="javascript:open_infos();">Ouvrir et centrer la Pop-Up</a>
</body>
</html>
Essayer

Merci, j'espère que vous avez aimé ce tutoriel.

Scripts et Tutoriels similaires

Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel Ouvrir une nouvelle fenêtre (Pop-up) en javascript - window.open tutoriel Image qui suit la souris en Javascript Image qui suit la souris en Javascript Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Recharger/Actualiser une page en javascript Recharger/Actualiser une page en javascript Empêcher le clic droit en Javascript (anticlicdroit) Empêcher le clic droit en Javascript (anticlicdroit)