Quelle est la meilleure solution discrète et légère pour ouvrir n'importe quel lien dans une popup de taille personnalisée?

Question

Quelle est la meilleure solution légère et discrète pour ouvrir n'importe quel lien dans la popup de taille personnalisée avec le bouton "fermer"?

Edit 3:

• et si JavaScript est désactivé, lien doit être ouvert dans un nouvel onglet/fenêtre comme toute une page normale. Popup devrait être ouvert verticalement et horizontalement centre sur toute résolution d'écran (j'ai remarqué pop-up de certains sites sur le net sur la configuration de moniteurs, pop-up s'ouvre sur le deuxième moniteur) et sans toute barre d'outils barre d'adresse etc.
• hauteur de pop-up devrait dépendre du contenu , non fixe

Je ne veux pas utiliser un plugin pour obtenir cet effet juste besoin d'un code simple et moins, ce qui aurait besoin fichier de bibliothèque jquery ne

comme ceci

alt text http://easycaptures.com/fs/uploaded/244/4705598517.jpg

Modifier: Je ne demande pas de "fenêtre modale" et "lightbox"

Edit 2:

Si js est désactivé alors pop-up devrait être ouvert dans une nouvelle fenêtre et "titre" du lien doit être changé aussi

comme ça: Le contenu viendra en lieu blanc.

<a href="http://stackoverflow.com" Title="Opens in a new pop-up" target="_blank"> 

dans ce

<a href="http://stackoverflow.com" Title="Opens in a new window" target="_blank"> 

et est-il possible de faire fonctionner le bouton "fermer la fenêtre", même si JS est désactivé.

Answer 1

Cherchez-vous quelque chose le long des lignes JQuery UI Dialog?

Démo here. Je ne recommanderais pas de "vrais" popups (c'est-à-dire des fenêtres de navigateur séparées) car ils ont tendance à se bloquer de plus en plus et ne peuvent pas être complètement stylés (IE> 7 et FF forcer la popup pour des raisons de sécurité).

Answer 2

Je ne pense pas que ce soit généralement bonne idée, mais vous convient.

Oh, vous ne pouvez pas fenêtre centrale, il est spécifique à l'OS de cette façon.

Modifier: Comme Pekka me awarned, vous pouvez ensemble vous la position, donc une meilleure solution (non testé):
Edit 2: Edité comme questioneer voulait et aussi, ce qui bobince a fait remarquer - $this n » t exister

<a id="close" href="your-link" target="_blank" title="opens in a new window">close</a> 

et

$(document).ready(function(){ 
    $("#close").attr('title','opens in a new pop-up'); //set new title 

    $("#close").click(function(){ //click action 
     w = parseInt((screen.width - 600)/2); h = parseInt((screen.height - 400)/2); 
     cwin = window.open($(this).attr('href'), 'closewin', 
     'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=400,width=600'); 
     cwin.moveTo(w,h); 
     return false; 
    }); 
}); 

Malheureusement, je ne sais pas comment régler la hauteur en fonction du contenu, cela nécessiterait plus de calculs.

Answer 3

La première étape est la solution de repli pour quand le script est désactivé, en utilisant l'attribut cible pour ouvrir la page dans une nouvelle fenêtre ou un nouvel onglet:

<a href="page.html" target="_blank">page</a> 

Ensuite, vous pouvez ajouter un script pour prendre en charge l'événement click :

<a href="page.html" target="_blank" onclick="window.open(this.href,this.target,'width=200,height=300');return false;">page</a> 

vous pouvez utiliser jQuery au lieu d'appliquer l'événement aux liens que vous voulez, par exemple l'appliquer à tous les liens avec class="popup":

$(function(){ 
    $('a.popup').click(function(e){ 
    window.open(this.href,this.target,'width=200,height=300'); 
    e.preventDefault(); 
    }); 
}); 

Vous pouvez ajouter plus de valeurs dans la chaîne de fonctionnalité, comme location=0,menubar=0,status=0,toolbar=0 pour essayer de supprimer des barres d'outils et autres à partir de la fenêtre. Cependant, la prise en charge de cette fonctionnalité est spécifique au navigateur et il n'est généralement pas possible de masquer l'emplacement.

Vous pouvez également essayer d'obtenir la résolution d'écran et de calculer les coordonnées pour centrer la fenêtre contextuelle, en utilisant les valeurs top=...,left=.... Obtenir la résolution d'écran est spécifique au navigateur, donc vous ne l'appliquerez que s'il est disponible.

Pour obtenir un bouton de fermeture dans la fenêtre contextuelle, vous avez besoin d'une page proxy qui peut ouvrir la page dans une iframe. Alors le code devient un peu plus long, bien sûr:

$(function(){ 
    $('a.popup').click(function(e){ 
    var w = window.open('',this.target,'width=200,height=300') 
    w.document.open(); 
    w.document.write(
     '<html>'+ 
     '<head>'+ 
     '<style>'+ 
     'iframe { border: none; height: 250px; }'+ 
     'a { float: right; padding: 10px; }'+ 
     '</style>'+ 
     '</head>'+ 
     '<body>'+ 
     '<iframe src="'+this.href+'"></iframe>'+ 
     '<a href="javascript:window.close();">Close</a>'+ 
     '</body>' 
    ); 
    w.document.close(); 
    e.preventDefault(); 
    }); 
});