Bootstrap 4 Modal neben dem Triggerelement öffnen
bearbeitet von liebewinterHallo, ich habe mein Webseite mit Bootstrap Grid gebaut, mein Probleme ist mit [Modal](https://getbootstrap.com/docs/4.4/components/modal/).
Der html code
~~~
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="product-grid">
<div class="product-image">
<a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<p class="title">Mochila doble tirantes Violeta</p>
</a>
</div>
<div class="price">$16.00</div>
<div class="div-zoom">
<span class="zum-warenkorb">zum warenkorb hinzufügen</span>
<a href="#">
<i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color: #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>
</a>
</div>
</div>
<div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body">
put here, whaterver you want
</div>
</div>
</div>
</div>
</div>
</div>
~~~
So, Mein Probleme:
Wenn klick der Zoom Icono, wird das Modal Fenster
[![Fenster mit dem Produkt](/images/b19a031a-7fd5-11ea-9b29-b42e9947ef30.png?size=medium "Fenster mit dem Produkt")](/images/b19a031a-7fd5-11ea-9b29-b42e9947ef30.png)
wird das Modal Fenster ganz Oben geöffnet..
[![Modal Fensterwird ganz Oben geöffnet](/images/351a1234-7fd6-11ea-95ce-b42e9947ef30.png?size=medium "Modal Fensterwird ganz Oben geöffnet")](/images/351a1234-7fd6-11ea-95ce-b42e9947ef30.png)
Ich have versuche mit dem **ID** **zoomWindow** diese Parameter geben,
~~~
#zoomWindow {
margin-top: 600px;
}
~~~
Das Modal Fenster wird nach Unten geöffnet aber der Webseite geht immer nach Oben...
[![webseite gehe nach oben, wenn Modal fenster geht nach unten](/images/3e7d66a4-7fd7-11ea-af67-b42e9947ef30.png?size=medium "webseite gehe nach oben")](/images/3e7d66a4-7fd7-11ea-af67-b42e9947ef30.png)
Meine frage, gibt es die möglichkeit die ich das Modal Fenster leget wo ich möchte ?
Bootstrap 4 Modal neben dem Triggerelement öffnen
bearbeitet von liebewinterHallo, ich habe mein Webseite mit Bootstrap Grid gebaut, mein Probleme ist mit [Modal](https://getbootstrap.com/docs/4.4/components/modal/).
Der html code
~~~
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="product-grid">
<div class="product-image">
<a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<p class="title">Mochila doble tirantes Violeta</p>
</a>
</div>
<div class="price">$16.00</div>
<div class="div-zoom">
<span class="zum-warenkorb">zum warenkorb hinzufügen</span>
<a href="#">
<i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color: #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>
</a>
</div>
</div>
<div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body">
put here, whaterver you want
</div>
</div>
</div>
</div>
</div>
</div>
~~~
So, ich habe zwei Probleme:
1- Wenn klick der Zoom Icono, wird das Modal Fenster
[![Fenster mit dem Produkt](/images/b19a031a-7fd5-11ea-9b29-b42e9947ef30.png?size=medium "Fenster mit dem Produkt")](/images/b19a031a-7fd5-11ea-9b29-b42e9947ef30.png)
wird das Modal Fenster ganz Oben geöffnet..
[![Modal Fensterwird ganz Oben geöffnet](/images/351a1234-7fd6-11ea-95ce-b42e9947ef30.png?size=medium "Modal Fensterwird ganz Oben geöffnet")](/images/351a1234-7fd6-11ea-95ce-b42e9947ef30.png)
Ich have versuche mit dem **ID** **zoomWindow** diese Parameter geben,
~~~
#zoomWindow {
margin-top: 600px;
}
~~~
Das Modal Fenster wird nach Unten geöffnet aber der Webseite geht immer nach Oben...
[![webseite gehe nach oben, wenn Modal fenster geht nach unten](/images/3e7d66a4-7fd7-11ea-af67-b42e9947ef30.png?size=medium "webseite gehe nach oben")](/images/3e7d66a4-7fd7-11ea-af67-b42e9947ef30.png)
Meine frage, gibt es die möglichkeit die ich das Modal Fenster leget wo ich möchte ?