Bootstrap 4 Modal neben dem Triggerelement öffnen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Bootstrap 4 Modal neben dem Triggerelement öffnen Thu, 16 Apr 20 11:45:12 Z https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769050#m1769050 https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769050#m1769050 <p>Hallo, ich habe mein Webseite mit Bootstrap Grid gebaut, mein Probleme ist mit <a href="https://getbootstrap.com/docs/4.4/components/modal/" rel="nofollow noopener noreferrer">Modal</a>.</p> <p>Der html code</p> <pre><code class="block"><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">&times;</span> </button> <div class="modal-body"> put here, whaterver you want </div> </div> </div> </div> </div> </div> </code></pre> <p>So, Mein Probleme:</p> <p>Wenn klick der Zoom Icono, wird das Modal Fenster</p> <p><a href="/images/b19a031a-7fd5-11ea-9b29-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/b19a031a-7fd5-11ea-9b29-b42e9947ef30.png?size=medium" alt="Fenster mit dem Produkt" title="Fenster mit dem Produkt" loading="lazy"></a></p> <p>wird das Modal Fenster ganz Oben geöffnet..</p> <p><a href="/images/351a1234-7fd6-11ea-95ce-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/351a1234-7fd6-11ea-95ce-b42e9947ef30.png?size=medium" alt="Modal Fensterwird ganz Oben geöffnet" title="Modal Fensterwird ganz Oben geöffnet" loading="lazy"></a></p> <p>Ich have versuche mit dem <strong>ID</strong> <strong>zoomWindow</strong> diese Parameter geben,</p> <pre><code class="block">#zoomWindow { margin-top: 600px; } </code></pre> <p>Das Modal Fenster wird nach Unten geöffnet aber der Webseite geht immer nach Oben...</p> <p><a href="/images/3e7d66a4-7fd7-11ea-af67-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/3e7d66a4-7fd7-11ea-af67-b42e9947ef30.png?size=medium" alt="webseite gehe nach oben, wenn Modal fenster geht nach unten" title="webseite gehe nach oben" loading="lazy"></a></p> <p>Meine frage, gibt es die möglichkeit die ich das Modal Fenster leget wo ich möchte ohne die webseite nach Oben gehen?</p> Bootstrap 4 Modal neben dem Triggerelement öffnen Thu, 16 Apr 20 13:46:02 Z https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769052#m1769052 https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769052#m1769052 <p>Hallo liebewinter,</p> <p>ich weiß zu wenig über Bootstrap um Dir da helfen zu können. Vermutlich muss man auch mehr von der Seite sehen - ist die irgendwo online?</p> <p>Ich kann nur sagen:</p> <p>Taschen & Rücksäcke - es heißt R<strong>u</strong>cksäcke, nicht R<strong>ü</strong>cksäcke</p> <p>In einer URL sollte das & nur vorkommen, um Parameter im Query-Teil voneinander zu trennen. "/tachen_&_rucksacke/" - das funktioniert zwar, aber es ist verwirrend. Ich würde an Deiner Stelle den Ordner anders nennen, oder das & als %26 maskieren.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Bootstrap 4 Modal neben dem Triggerelement öffnen Sun, 19 Apr 20 13:54:13 Z https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769151#m1769151 https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769151#m1769151 <p>Geschafft ! </p> <p>So, ich habe auf eine andere Forum gefragt und have die losung mit JQuery gegeben..</p> <p>so, das Code von eine Fenter,</p> <pre><code class="block"><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> <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color: #595959; padding: 3%; cursor: zoom-in;" onclick='layer_show();'></i></div> </div> </div> <div id="layerPreview" ></div> <div id='layerPreviewContent'> <div style='width:100%;text-align:right;border-bottom:1px solid;'><span onclick="layer_close();" style='cursor:pointer;padding-right:5px;'>cerrar</span></div> Texto para la capa </div> </div> </div> </code></pre> <p>Die jQuery code,</p> <pre><code class="block"><script> function layer_show() { $('#layerPreview').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;"); La anchura y la posicion centrada se establece en el estilo */ var posTop=(($(window).height()/2)-(200/2))+$(document).scrollTop(); if(posTop<0) posTop=0; $('#layerPreviewContent').attr("style", "top:"+posTop+"px;"); /* Indicamos que se muestre la capa */ $('#layerPreviewContent').show(600); } function layer_close() { $('#layerPreviewContent').hide(300); $('#layerPreview').hide(); } </script> </code></pre> <p>....und mein Geliebt Fenster.. </p> <p><a href="/images/df25ad22-8244-11ea-9f62-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/df25ad22-8244-11ea-9f62-b42e9947ef30.png?size=medium" alt="das fenster dem ich bekomme" title="das fenster dem ich bekomme" loading="lazy"></a></p> <p>Ich wünsche alle euch eine gesunde leben! das wichtiger für uns menschen, mehr als scheiße Geld....</p> Bootstrap 4 Modal neben dem Triggerelement öffnen Fri, 17 Apr 20 09:50:09 Z https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769066#m1769066 https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769066#m1769066 <p>Viel dank für dienen Antwort Ralf!</p> <p>ganze code kannst <a href="https://codepen.io/mezb/pen/YzyqLqy" rel="noopener noreferrer">here</a> siehst ...</p> <p>noch habe ich <a href="https://stackoverflow.com/questions/61232132/how-can-i-open-a-bootstrap-modal-beside-the-trigger-element/61252676#61252676" rel="noopener noreferrer">hier</a> gefragt und jemand ganz Unten geben einiger Vorschlag wie mit <strong>Modal</strong> mache kann..</p> <p>Ich habe auf eine Webseite gesehen die ähnliche gebaut hat wie ich wünsche...ich habe mit <strong>Firefos > Extras > Web-Entwickler > Werkzeuge</strong> sein Code geprüft... er/sie hat mit <strong>jQuery</strong> gemacht, eine Screenshot..</p> <p><a href="/images/483e94f2-808f-11ea-871e-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/483e94f2-808f-11ea-871e-b42e9947ef30.png?size=medium" alt="java script code um das fenster zu öffnen" title="java script code um das fenster zu öffnen" loading="lazy"></a></p> <p>ich denke das ist mehr kompliziert weiter mit <strong>Modal</strong> machen als versuche mit jQuery zu machen...</p> <p>Das Probleme ist das es weiß nicht... </p> <p>Ich habe nicht gut verstand was meinst mit</p> <blockquote> <p>Ich würde an Deiner Stelle den Ordner anders nennen, oder das & als %26 maskieren.</p> </blockquote> <p>ich habe in Wikipedia <a href="https://de.wikipedia.org/wiki/URL-Encoding" rel="nofollow noopener noreferrer">gesucht </a> und auf der Tabelle in <strong>Relevante ASCII-Zeichen in Prozentdarstellung</strong> zeigt die Zeichnung <strong>&</strong> mit dem zahlt <strong>%26</strong>..</p> Bootstrap 4 Modal neben dem Triggerelement öffnen Fri, 17 Apr 20 10:35:08 Z https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769070#m1769070 https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769070#m1769070 <p>@@Rolf B</p> <blockquote> <p>In einer URL sollte das & nur vorkommen, um Parameter im Query-Teil voneinander zu trennen.</p> </blockquote> <p>Warum?</p> <blockquote> <p>"/tachen_&_rucksacke/" - das funktioniert zwar, aber es ist verwirrend.</p> </blockquote> <p>Mich verwirrt eher „tachen“.</p> <blockquote> <p>Ich würde an Deiner Stelle den Ordner anders nennen</p> </blockquote> <p>ta<strong>s</strong>chen_&_rucks<strong>ä</strong>cke oder ta<strong>s</strong>chen_&_rucks<strong>ae</strong>cke?</p> <p>Ich würde aber <a href="https://forum.selfhtml.org/self/2020/apr/04/navigationsteleportation-richtig-einstellen/1768442#m1768442" rel="noopener noreferrer">keine Unterstriche</a> verwenden.</p> <p>Und auf das & kann man verzichten: taschen-und-rucksaecke oder taschen-rucksaecke.</p> <blockquote> <p>oder das & als %26 maskieren.</p> </blockquote> <p>Das nehmen einem die Browser wohl ab. Aber & sollte sowieso nicht unmaskiert im HTML stehen. Aber ja, in dem Kontext wäre <code class="good">%26</code> angebracht, nicht <code class="bad">&amp;</code>.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>) </div> Bootstrap 4 Modal neben dem Triggerelement öffnen Fri, 17 Apr 20 11:07:06 Z https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769073#m1769073 https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769073#m1769073 <p>@@liebewinter</p> <blockquote> <p>ganze code kannst <a href="https://codepen.io/mezb/pen/YzyqLqy" rel="noopener noreferrer">here</a> siehst ...</p> </blockquote> <p>Das <img src="/images/63467006-809b-11ea-a3c4-b42e9947ef30.png" alt="Ausrufezeichen im roten Kreis" loading="lazy"> hat schon seine Bewandnis. Click da mal drauf … und ändere das in deinem Pen.</p> <p lang="en"> Stay hard! Stay hungry! Stay alive! <strong>Stay home!</strong></p> <div class="signature">-- <br> Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (<a href="https://twitter.com/Grantscheam/status/1247046064504537092" rel="nofollow noopener noreferrer">@Grantscheam</a>) </div> Bootstrap 4 Modal neben dem Triggerelement öffnen Fri, 17 Apr 20 13:27:52 Z https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769089#m1769089 https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769089#m1769089 <p>Hallo Gunnar,</p> <blockquote> <p>Warum?</p> </blockquote> <p>Weil das & in einer HTTP-URL eine bestimmte Bedeutung hat. Zu erkennen, dass an dieser Stelle der Kontext dieser Bedeutung noch nicht erreicht ist, ist ein Gedankenschritt. Don't make me think. War das nicht Dein Credo?</p> <p>Das Argument gegen den Unterstrich kann ich bei einer URL nicht nachvollziehen, es ist ja nicht der Linktext. Der Anwender kriegt sie auf der Seite nicht zu sehen. Oder seh ich jetzt was nicht?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> Bootstrap 4 Modal neben dem Triggerelement öffnen Fri, 17 Apr 20 11:09:45 Z https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769074#m1769074 https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769074#m1769074 <p>Danke ich habe jetzt gemacht!</p>