modal fenêtre pop-up pour s'insérer dans la vue navigateur si redimensionner la hauteur

Je suis allé à ce tutoriel pour faire un modal fenêtre pop-up, et il semble assez agréable pour ce que je dois faire. Cependant, je me demandais si quelqu'un peut m'aider à comprendre ce que j'ai besoin de calculer à la boîte de dialogue modifier afin d'en suivre chaque fois que vous redimensionnez le navigateur. Ce tutoriel est bon parce que si vous redimensionnez votre navigateur (en largeur), la zone de suivre et d'aller dans le milieu. Mais si elle est à la hauteur de la sagesse, il l'habitude.

Tutoriel : Ici

Je pense qu'il a à faire avec ces codes :

    //get the screen height and width  
var maskHeight = $(document).height();  
var maskWidth = $(window).width();

//calculate the values for center alignment
var dialogTop =  (maskHeight/3) - ($('#dialog-box').height()/3);  
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

//assign values to the overlay and dialog box
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();

J'ai essayé d'utiliser $(window).hauteur() mais je ne pense pas que les travaux soit. J'ai essayé d'imiter la largeur de styles parce que l'on travaille, mais il ne semble pas fonctionner avec la hauteur? Quelqu'un peut-il m'aider?

Merci!

InformationsquelleAutor hellomello | 2011-08-22
  1. 3

    Essayer cette

    De travail démo. Vous pouvez redimensionner la fenêtre et essayer de re positions de la boîte de dialogue automatiquement vers le centre.

    $(function(){
    $(window).resize(function(){
    //get the screen height and width  
    var maskHeight = $(window).height();  
    var maskWidth = $(window).width();

    //calculate the values for center alignment
    var dialogTop =  (maskHeight  - $('#dialog-box').height())/2;  
    var dialogLeft = (maskWidth - $('#dialog-box').width())/2; 

    //assign values to the overlay and dialog box
    $('#dialog-overlay').css({ height:$(document).height(), width:$(document).width() }).show();
    $('#dialog-box').css({ top: dialogTop, left: dialogLeft, position:"fixed"}).show();
    }).resize();
});
    • le problème que je vais avoir, c'est que le popup ne montre que la fenêtre de la résolution de l'écran, et pas la fenêtre du navigateur de l'écran. Si ma page est vraiment long, et il a un lien en bas. Le pop-up sera la moitié de la fenêtre de l'écran (sur la base du calcul) au haut de la page. Je vais essayer de l'avoir popup où mon navigateur actuel point de vue est.
    • Jetez un oeil à ce violon jsfiddle.net/tF8TU/2 j'ai modifié maintenant. Aussi modifié ma réponse.
    • Maintenant, si vous faites défiler la superposition de la hauteur couvre l'ensemble du document et aussi la boîte reste toujours au centre.
    • Ouais!! Celui-ci fonctionne! Merci!!
    • Si le contenu de l'modal dépasse la hauteur de l'écran? Il a ensuite clips sur le dessus et le fond de la boîte et il n'existe aucun moyen pour faire défiler pour voir le contenu. Jetez un oeil à ce violon...http://jsfiddle.net/tF8TU/3/ pour un exemple de ce que je veux dire. Redimensionnez-la pour mobile dimensions. Quelqu'un connais une solution?
    • Dans de tels cas, vous pouvez redimensionner la boîte de dialogue modale si le contenu le permet.

    InformationsquelleAutor ShankarSangoli