css - En-tête fixe position dans le bootstrap 3 modal

73

Au lieu d'essayer de l'en-tête fixe, juste corriger la hauteur du corps et de le rendre à défilement. De cette façon, l'en-tête et pied de page) sera toujours visible.

Vous pouvez facilement le faire en utilisant le CSS3 vh unité avec calc. Les deux vh comme calc d'avoir une bonne prise en charge du navigateur (IE9+).

Le vh unité est par rapport à la fenêtre d'affichage (= fenêtre de navigateur) de hauteur. 1 vh est de 1% de la hauteur et 100vh signifie que 100% de la fenêtre d'affichage de la hauteur.

Nous avons juste besoin de soustraire la hauteur de la modale de l'en-tête, pied de page et les marges. Il va être difficile de cette dynamique. Si ces tailles sont fixes, nous nous contentons d'ajouter toutes les hauteurs.

Définir le height ou max-height à calc(100vh - header+footer px).
```
.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
```
Voir le jsfiddle
- Merci!!!! celui-ci devrait être la réponse! Seulement avoir des problèmes de réglage de la hauteur du modal maintenant, mais sera probablement fix que bientôt 🙂
- Si vous arrive d'être en utilisant MOINS et d'avoir des problèmes avec cette fonction, reportez-vous à stackoverflow.com/questions/11972084/....
- C'est génial. Bien fait.
- bien dit.. m'aide beaucoup..
InformationsquelleAutor Jasny - Arnold Daniels

Voici un truc tout simple.
Permettez-moi de penser que j'ai à résoudre le div avec la classe "fixedHeader"

Jquery Simple Moyen:

$('.modal').scroll(function() {
     var a=$('.modal').scrollTop();
     $('.fixedHeader').css('top',a+'px');
});

CSS

.fixedHeader {
    position:fixed;
}

Tout ce que j'ai répondu ci-dessus est normal amorçage à l'aide de jquery.Mais si quelqu'un est à l'aide angulaire de bootstrap pour le modal puis

Angulaire

$timeout(function() {
    angular.element('.modal').scroll(function() {
        var a = angular.element('.modal').scrollTop();
        angular.element('.fixedHeader').css('top', a + 'px');
    });
}, 10);
/*Put the above in modalinstance controller*/
/*timeout is necessary as you want to run the function after the modal is loaded or sometimes it may be unable to find the class '.modal' */

CSS

.fixedHeader {
    position:fixed;
}

Assurez-vous que vous avez jquery dépendance installé dans les deux cas.

InformationsquelleAutor ritz078

4

Ma solution peut sembler un peu idiot, mais il détaille les étapes que j'ai pris pour résoudre ce problème pour mon cas d'utilisation.

J'ai essayé quelque chose comme ritz078 de réponse, mais ce que j'ai trouvé est qu'il ne fonctionne pas bien sur iOS lors du défilement, depuis Safari aime faire les choses à sa manière.

Donc, ma solution a été de reproduire le peu de code que j'ai voulu apposer et de la place que le code dupliqué à l'extérieur de l'modal tout à fait dans son propre cachés wrapper:
```
<div class="fixed-header">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
    </div>
</div>
```
Ensuite, j'ai utilisé le JS pour 1) faire le code en double visibles après que j'ai faites défiler les modaux un peu, 2) fermez le code en double à chaque fois que je cliquez en dehors de la modale, et 3) la fonctionnalité de restauration à la copie de la modale du bouton fermer:
```
$('#myModal').on('scroll', function() {
    var threshold = 60;

    if ($('#myModal').scrollTop() > threshold) {
        $('.fixed-header').addClass('affixed');
    }
    else {
        $('.fixed-header').removeClass('affixed');
    }
});

$('#myModal').on('hide.bs.modal', function (e) {
    $('.fixed-header').removeClass('affixed');
});

$('.fixed-header button').click(function() {
    $('#myModal').modal('hide');
});
```
Le défi ici est correspondant à modale du style (en particulier de sa largeur et marges), mais cette solution vous permet de faire défiler le modal librement sur iOS sans regarder funky, ce qui était mon objectif.

JSFiddle (fourche de Jasny réponse pour montrer comment c'est différent dans le champ d'application de sa réponse)

InformationsquelleAutor Brendan
3

Que par mon commentaire, c'était en fait une amélioration dans le Bootstrap 3. Ce qui permet de longues contenu et d'avoir l'ensemble de la modale de défilement, et pas seulement le "contenu" de l'modal.

Vous pouvez la remplacer par quelque chose comme cela, mais ce n'est pas aussi belle fonctionnalité.
```
.modal {
  overflow: hidden;
}

.modal-body {
  height: 300px;
  overflow: auto;
}
```
Démo
- Merci, mais en fait, je veux utiliser ce BS amélioration à côté d'un en-tête fixe. Je suis en utilisant des modaux comme une visionneuse rapide de produit et lorsque l'utilisateur de sélectionner les options, les prix changent. Je veux utiliser l'en-tête pour indiquer à l'utilisateur des changements dans le prix final, afin de ne pas être surpris quand se termine le défilement.
- Vous ne pouvez pas avoir un ensemble modal de défilement et ont un en-tête fixe sur qui modal. L'en-tête devrait être à l'extérieur de la modale.
InformationsquelleAutor davidpauljunior

En javascript ajouter une classe modale:

windowClass: 'framework-modal'

En css ajuster o modal-body:

.framework-modal .modal-body {
    max-height: 600px;
    overflow: auto;
}

InformationsquelleAutor Edmilson Lani

-1

Dans le Corps de la

CSS:
```
body{
    overflow:hidden;
}
```
InformationsquelleAutor ramiz

Vous devez vous connecter pour publier un commentaire.

Voir le jsfiddle