<SCRIPT LANGUAGE="JavaScript">
<!—
function afficherPopup(nom_de_la_page, nom_interne_de_la_fenetre)
{
  window.open (nom_de_la_page, nom_interne_de_la_fenetre, config='height=100, width=400, 
                 toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no')
}
-->
</SCRIPT>

Et pour appeler la fonction par un lien :

<a href="javascript:afficherPopup('fichier.html','popup_1');">Afficher la popup</A>

Pour fermer la fenêtre pop-up :

<a href="#" onclick="window.close()">fermer</a>

La protection par mot de passe en JavaScript n'est pas sécuritaire. Il est préférable d'utiliser des fichiers .htpassword, .htaccess, des scripts PHP, Perl, etc. Mais lorsqu'il s'agit simplement d'éviter que des amateurs lisent du contenu, ce genre de script peut être acceptable.

Il y a trois approches à la protection par mot de passe. Dans toutes les approches, il ne faut pas oublier d'entourer le code de commentaires HTML en cas où le JavaScript du navigateur est désactivé ou non-supporté.

Cette approche demande le mot de passe au visiteur et s'il est bon, il sera redirigé à la bonne page selon le mot de passe. Le nom de la page protégée est composée du mot de passe et de l'extension voulue (ex : .html).

Code à placer dans l'entête du document :

<script language="javascript">
function proteger() {
   var password = prompt("Mot de passe nécessaire :", "");
   if (password) { this.location.href = password + ".html"; }}
 
</script>

Plus loin, un lien qui mènera potentiellement à la bonne page :

<p><a href="javascript:{;}" onClick="proteger(); return false">Cliquez ici</A> pour aller sur la page protégée</p> 

Cette méthode n'est peut-être pas la meilleure, puisque si le mauvais mot de passe est entré, une erreur 404 sera affichée.

Avec cette méthode, il faut mettre le code dans la page à protéger. Dès que la page est demandée, une invite demande le mot de passe. Si le mot de passe est mauvais on redirige vers une autre page. S'il est correcte, la page elle-même est affichée. Le script se termine seulement en affichant un message de confirmation, ce qui peut être enlevé.

<script language="JavaScript">
var password;
var pass1="motdepasse";
 
password=prompt('Entrez votre mot de passe.',' ');
 
if (password==pass1) {
  alert('Votre mot de passe est correcte !');
}
else {
  window.location="http://www.votresite.com/repertoire/incorecte.html";
}
</script>

Si le JavaScript est désactivé, le contenu de la page sera affiché.

La troisième approche affiche un formulaire qui est associé au script Javascript.

<script language="JavaScript" type="text/javascript">
<!--- 
 
function verifierMDP() {
 
  var password = 'motdepasse';
  var password = String.fromCharCode(50,68,78,99,103,65);
 
  if (this.document.login.pass.value == password) {
    top.location.href="correcte.html";
  }
  else {
    location.href="incorrecte.html";
  }
}
 
// End hiding --->
</script>

Et dans la même page, le formulaire :

<form name="login" style="margin: 0px">
  <input type="text" name="pass" size="17" onKeyDown="if(event.keyCode==13) event.keyCode=9;" style="width: 152px; margin: 5px;"><br>
  <input type="button" value="Entrez" onclick="verifierMDP(this.form)">
</form>

On peut utiliser la fonction String.fromCharCode(num1,num2,…,numn) ; pour ne pas donner directement le mot de passe en clair. Les paramètres num sont des entiers représentant le code ASCII du caractère. Il peut en avoir autant qu'on en veut.

Pour afficher du contenu selon certaines circonstances, il faut utiliser une balise div avec la propriété display. Peut être mieux qu'utiliser un UpdatePanel en ASP.NET et l'afficher/cacher avec la programmation server-side.

Voici un exemple du code Javascript :

<script language="JavaScript" type="text/javascript">
var browserType;
if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {
    browserType= "gecko"
}
 
function showDiv() {
    if (browserType == "gecko" ) {
        document.poppedLayer = eval('document.getElementById("divId")');
    }
    else if (browserType == "ie") {
        document.poppedLayer = eval('document.getElementById("divId")');
    }
    else {
        document.poppedLayer = eval('document.layers["divId"]');
    }
    document.poppedLayer.style.display = "inline";
}
 
function hideDiv() {
    if (browserType == "gecko" ) {
        document.poppedLayer = eval('document.getElementById("divId")');
    }
    else if (browserType == "ie") {
        document.poppedLayer = eval('document.getElementById("divId")');
    }
    else {
       document.poppedLayer = eval('document.layers["divId"]');
    }
    document.poppedLayer.style.display = "none";
}
</script>

Et le code HTML :

<div id="divId" style="display:none" >
  <p>Ici le contenu à afficher/cacher.</p>
</div>
<form>
    <input type="button" onClick="showDiv()" value="Afficher">
    <input type="button" onClick="hideDiv()" value="Cacher">
</form>

Source : Real's How-to

<html>

<script language=“JavaScript” type=“text/javascript”> var browserType; if (document.layers) {browserType = “nn4”} if (document.all) {browserType = “ie”} if (window.navigator.userAgent.toLowerCase().match(“gecko”)) {

  browserType= "gecko"

}

function showDiv() {

  if (browserType == "gecko" ) {
      document.poppedLayer = eval('document.getElementById("divId")');
  }
  else if (browserType == "ie") {
      document.poppedLayer = eval('document.getElementById("divId")');
  }
  else {
      document.poppedLayer = eval('document.layers["divId"]');
  }
  document.poppedLayer.style.display = "inline";

}

function hideDiv() {

  if (browserType == "gecko" ) {
      document.poppedLayer = eval('document.getElementById("divId")');
  }
  else if (browserType == "ie") {
      document.poppedLayer = eval('document.getElementById("divId")');
  }
  else {
     document.poppedLayer = eval('document.layers["divId"]');
  }
  document.poppedLayer.style.display = "none";

} </script>

<p>Ici le contenu à afficher/cacher.</p>

<form>

  <input type="button" onClick="showDiv()" value="Afficher">
  <input type="button" onClick="hideDiv()" value="Cacher">

</form> </html>