Bootstrap modal au sommet de l'iframe, indépendamment de la position de défilement. Comment dois-je positionner sur l'écran?

Lors de l'intégration d'un Bootstrap application dans un iframe, des boîtes de dialogue modales toujours ouvert sur le sommet de l'iframe, pas le haut de l'écran. Par exemple, allez à http://getbootstrap.com/javascript/ et ouvrir un exemple modal sur la page. Ensuite, à l'aide de l'exemple de code ci-dessous qui met la même bootstrap page dans un iframe, trouver un modal et de l'ouvrir:

<html>
    <head>
    </head>
    <body>
        <table width="100%">
            <tr><td colspan="2" style="height:80px;background-color:red;vertical-align:top">Here's some header content I don't control</td></tr>
            <tr><td style="width:230px;height:10080px;background-color:red;vertical-align:top">Here's some sidebar content I don't control either</td>
                <td valign="top">
                    <iframe width="100%" height="10000px" 
                        scrolling="no" src="http://getbootstrap.com/javascript/">
                    </iframe>
                </td>
            </tr>
        </table>
    </body>
</html>

La démo en violon

Comment puis-je aller sur le positionnement de l'modal sur l'écran dans ce scénario?

Mise à JOUR: Malheureusement, mon iFrame ne peut pas remplir l'écran, je ne peux le rendre fixe depuis qu'il a besoin pour se fondre dans le reste de la page et la page elle-même a assez de contenu pour faire défiler. Ce n'est pas mon dessin et j'ai l'intention de retravailler l'ensemble de la chose, mais c'est ce que j'ai à contourner pour l'instant. En tant que temporaire en option, je suis en utilisant javascript pour raconter l'iframe parent pour faire défiler vers le haut lorsque la boîte de dialogue modale s'affiche. Bien que cela soit acceptable, ce n'est pas le comportement souhaité.

Je suis en utilisant angularjs et de l'interface utilisateur-bootstrap bibliothèque dans mon code, mais comme vous pouvez le voir ci-dessus, c'est un bootstrap question.

OriginalL'auteur Charles Josephs | 2014-07-17

Si votre iframe a la même document.domaine que la fenêtre parent ou c'est un sous domaine, vous pouvez utiliser le code ci-dessous à l'intérieur de l'iframe:

    $('#myModal').on('show.bs.modal', function (e) {
        if (window.top.document.querySelector('iframe')) {
            $('#myModal').css('top', window.top.scrollY); //set modal position
        }
    });

spectacle.bs.modal le feu après l'appel de $('#myModal').show()
fenêtre.haut.scrollY obtiendrez la scrollY position de la fenêtre parent

Dans le cas où votre document.domaine diffère du parent, vous pouvez pirater obtenir le onmousedown position à l'intérieur de l'iframe. Par exemple:

$('#htmlElement').on('mousedown', function (event) {
    event.preventDefault();
    $('#myModal').data('y', event.pageY); //store the mouseY position
    $('#myModal').modal('show');
});
$('#myModal').on('show.bs.modal', function (e) {
    var y = $('#myModal').data('y'); //gets the mouseY position
    $('#myModal').css('top', y);
});

OriginalL'auteur Rogério Jun Nakatani

1

C'est un bug dans la plupart des navigateurs (IE apparaît fine) où les éléments sont fixés à la iframe, pas de la fenêtre. En règle générale, si vous avez besoin de quelque chose par rapport au document principal, il doit être dans le document principal.

Une solution de contournement consiste à envelopper votre iframe dans une position fixe div qui prend toute la largeur de l'écran, puis de maximiser l'iframe à l'intérieur. Cela semble résoudre le problème

HTML:
```
<div class="fixframe">
    <iframe src="http://getbootstrap.com/javascript/"></iframe>
</div>
```
CSS:
```
.fixframe {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;    
} 
.fixframe iframe {
   height: 100%;
   width: 100%;  
} 
```
Travail de Démonstration dans le violon

Voir Aussi:
cela fonctionne très bien si l'iframe remplit l'écran et pouvez faire défiler elle-même, mais mon iframe, malheureusement, ne peut pas défiler elle-même ne les limitations de l'existant, conception de page. J'ai mis à jour ma question et la jsfiddle avec ces détails

OriginalL'auteur KyleMit
0

C'est parce que la classe .modal a position: fixed attribut. Essayez position: relative à la place.

J'ai essayé dans mon contexte et il a produit étrange comportement opposé où le modal ont commencé à apparaître de loin en dessous de la fenêtre d'affichage. Je pense que cela peut être parce que mon iFrame situation n'est pas exactement la façon dont je l'ai posté initialement. J'ai mis à jour ma question avec une représentation plus précise de mon scénario.

OriginalL'auteur Salman

Vous devez vous connecter pour publier un commentaire.

Travail de Démonstration dans le violon