Jeu modal de la couche vers le centre de fo à l'écran

Je suis en utilisant Twitter Bootstrap modal de, mais j'ai dû changer leur position à l'absolu, être la cause j'ai besoin d'eux pour être en mesure de faire défiler cause des écrans de petite taille. Malheureusement, avec cela, les auxiliaires modaux ouverte à une position fixe du site et non sur la zone considérée.
Est-il possible de l'ouvrir (et être en mesure de faire défiler) à l'écran ce que je suis en train de visionner?

CSS:

.modal {
    width: 845px;
    margin: -250px 0 0 -430px;
    background-color: #f6f5ed;
    position: absolute;
    border: 1px solid #cdc4b2;
    top: 50%;
    left: 50%;
}

OriginalL'auteur Stefanie | 2012-10-17

14

Ce fil: Modal plugin Bootstrap 2 n'est pas affiché par le centre a la bonne réponse, posté ici:
```
   $('#YourModal').modal().css(
            {
                'margin-top': function () {
                    return window.pageYOffset-($(this).height() / 2 );
                }
            });
```
Merci, cela a aidé! 🙂
Qui permet, certes, mais maintenant, le modal pousses tout le chemin vers le bas du document sur le non-site mobile pour moi.
voir la réponse que j'ai donnée tout à l'heure, j'ai conservé de css

OriginalL'auteur steve
4

La solution de @steve n'a pas de travail pour moi, malgré mon problème étant identique à @Stephanie.

Reformulant le problème que Stéphanie et je partage:

J'ai longtemps bootstrap auxiliaires modaux. Sur les petits écrans, les modaux ne peuvent pas être consultés dans leur intégralité sans défilement. Par défaut dans le bootstrap des modaux sont en position:fixed. Je peut leur permettre de faire défiler par la modification de cette position:absolute.

Mais maintenant j'ai un nouveau problème. Mes pages sont trop long, et quand je lance le modal de la bas de la page de la modale apparaît à la haut de la page, en dehors de la vue du navigateur.

Pour fixer ces deux:

css:
```
//allows the modal to be scrolled
.modal {position: absolute;}
```
javascript/jQuery:
```
//jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  $('body').scrollTop(0);
});
```
Mais il s'avère que Firefox n'aime pas les "corps" comme un sélecteur pour scrollTop, mais ne like 'html'. Webkit fonctionne à l'inverse. À l'aide d'un commentaire à partir d'ici: Animer scrollTop ne fonctionne pas sous firefox

Depuis que je suis à l'aide de jQuery < 1.9 je peux faire la détection de browser pour résoudre ce problème:
```
//jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  //Firefox wants 'html', others want 'body'
  $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0);
});
```
Maintenant, quand les modaux sont licenciés, ils apparaissent en haut de la page, le navigateur de la fenêtre de défilement vers le haut pour les exposer, mais l'utilisateur peut faire défiler vers le bas si son écran est trop petit pour afficher la totalité de la longueur de la modale.

Je sais je suis en retard à la fête, mais c'est vraiment LA bonne solution pour la question. Je vous remercie pour cela.

OriginalL'auteur AllInOne
1

Utiliser la position "fixe" pas "absolue".

Plus de détails ici http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Lire ce que j'ai écrit: "...mais j'ai dû changer leur position à l'absolu, être la cause j'ai besoin d'eux pour être en mesure de faire défiler..."
Avez-vous jamais trouver une solution à ce stefanie? Je suis dans le même bateau.
-1 par défaut dans le bootstrap est "fixe". L'OP est à la recherche afin de surmonter les difficultés avec "fixe".

OriginalL'auteur tomaszbak

Un peu en retard pour le jeu, mais c'est la correction que je suis actuellement en place et fonctionne sur Firefox, Chrome et IE.

$('body').on('show', '.modal', function () {
$(this).css({ 'margin-top': window.pageYOffset - $(this).height() / 2, 'top': '50%' });
$(this).css({ 'margin-left': window.pageXOffset - $(this).width() / 2, 'left': '50%' });
});

OriginalL'auteur Damian

Dû changer de positionnement absolu, aussi il serait de défilement sur les mobiles.

Cela a fonctionné pour moi aussi (solution par AllInOne):

//jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  //Firefox wants 'html', others want 'body'
  $(jQuery.browser.mozilla ? "html" : "body").scrollTop(0);
});

OriginalL'auteur user2959136

0

Le problème, c'est les feuilles de style CSS de votre "corps" & "balises HTML sont mis à "height: 100%"

OriginalL'auteur Aro Hostmaster

Vous devez vous connecter pour publier un commentaire.