Ein Element neben einem Bootstrap-Modal positionieren

Ich habe ein kleines Pfeilelement, das Teil eines Bootstrap-Modals ist und auf das Element zeigt, das das Modal zum Öffnen ausgelöst hat.Ein Element neben einem Bootstrap-Modal positionieren

Das funktioniert gut. Wenn das Modal jedoch sehr lang ist und der Benutzer einen Bildlauf durchführen muss, bleibt das Pfeilelement nicht mehr stationär und zeigt auf das Auslöserelement. Das bedeutet, dass ich den Pfeil außerhalb des .modal-dialogue div platzieren muss, was bedeutet, dass er an der linken Seite der Seite hängt.

Würde jemand wissen, wie ich den Pfeil positionieren könnte, so dass es konsequent neben dem Modal ist?

Fiddle: https://jsfiddle.net/umv4jhLg/3/

HTML:

<div class="modal fade in" id="mymodal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     CONTENT 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
    <div class="modal-arrow"></div> 
</div><!-- /.modal -->

CSS

.modal-content { 
    height: 800px; 
    width: 400px; 
    margin-left: 40px; 
} 

.modal-arrow { 
    content: ""; 
    display: block; 
    position: fixed; 
    top: 60px; 
    bottom: auto; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 25px 35px 25px 0; 
    border-color: transparent #ffffff transparent transparent; 
    -webkit-filter: drop-shadow(-2px 0px 1px rgba(0,0,0,.5)); 
    -moz-filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5)); 
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,.5)); 
}

Quelle

2016-04-20 MeltingDog

Überprüfen Sie meine fork Ihrer Geige.

Dinge zu beachten:

Pfeil der Positionierung entfernt JavaScript für
hinzugefügt, dies .modal-Pfeil Klasse: top: 50vh; transform: translateY(-50%);

Wenn Sie nicht wissen, vh steht für Ansichtsfensterhöhe Ein Wert von 50 bedeutet die Hälfte der verfügbaren Ansichtsfensterhöhe. Ich habe das translateY (-50%) hinzugefügt, um das Pfeilobjekt im vertikalen Raum genauer auszurichten. Übersetzung ist eine sauberere, modernere Art vertikal zu zentrieren und ist ein guter Ersatz für die Verwendung von negativen margin-top.

Chrom/Mac 49.0.2623.112

Quelle

2016-04-20 03:00:13

Danke, aber ich bekomme immer noch das gleiche Problem - die vertikale Positionierung ist nicht das Problem, die horizontale Positionierung ist. Der Pfeil befindet sich immer noch ganz links neben dem Ansichtsport und nicht direkt neben dem Modal. – MeltingDog

@MeltingDog Hast du schon den statischen Knopf von meiner Gabel deiner Geige gesehen? In welchem Browser sehen Sie dieses Problem? Außerdem bin ich mir nicht sicher, was Sie erreichen wollen. Können Sie einen Screenshot von genau dem, was Sie wollen, bereitstellen oder versuchen, auf eine andere Weise zu beschreiben, was Sie suchen? –

Grundsätzlich zeigt Ihr .gif genau das an, was ich versuche zu erreichen - Pfeilstatistiken statisch während modale Schriftrollen. Aber auf Ihrer Gabel bleibt der Pfeil auf der linken Seite des Bildschirms, während das Modal zentriert bleibt, was bedeutet, dass wenn ich den Bildschirm strecke, eine Lücke zwischen dem Pfeil und dem Modal erscheint (Entschuldigung, das Setup lässt mich keinen Screenshot machen) . Ich verwende Chrome unter Windows 7. – MeltingDog

-1

Sie dies versucht haben ...

.modal-arrow {left: 35px

Kontrolle der Geige: https://jsfiddle.net/umv4jhLg/6/

Quelle

2016-04-20 03:00:08 nzkks

Das würde nur funktionieren es würde gesetzt, statische Margen.Wenn Sie Ihr Browserfenster dehnen, werden Sie sehen, dass sie auseinander fallen. – MeltingDog

-1

Zuerst müssen sie wie trennen, wie Sie in Ihrem statischen Beispiel tat. Aber auch wollen, um sie zusammen zu halten, wenn das Fenster horizontal geändert wird, als mit einem grundlegenden Ansatz sie in Spalten nehmen einzeln

<div class="col-xs-2"> 
    <div class="modal-arrow" id="left"> 

    </div> 
</div> 

<div class="col-xs-10" id="right"> 
     <div class="modal-dialog"> 
     ... 
     </div> 
</div>

während der Pfeil befestigt ist, ist es besser, erben es Breite ist statt versuchen, es zu beheben rechts und für die Grenzüberschneidung hat der Pfeil die Priorität.

#left { 
    width: inherit; 
    z-index: 1; 
    left: 17px; 
}

und entfernen Sie den linken Teil der Ränder

$('#right').find('*').css('margin-left', '0');

Here ist das Arbeits Fiedler.

Quelle

2016-04-20 15:38:01 cmlonder

Ein Element neben einem Bootstrap-Modal positionieren

Antwort

Verwandte Themen