Bootstrap 4 Modal neben dem Triggerelement öffnen

[liebewinter]

Hallo, ich habe mein Webseite mit Bootstrap Grid gebaut, mein Probleme ist mit 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">&times;</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

wird das Modal Fenster ganz Oben geöffnet..

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...

Meine frage, gibt es die möglichkeit die ich das Modal Fenster leget wo ich möchte ohne die webseite nach Oben gehen?

[Rolf B]

Hallo liebewinter,

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?

Ich kann nur sagen:

Taschen & Rücksäcke - es heißt Rucksäcke, nicht Rücksäcke

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.

Rolf

[liebewinter]

Viel dank für dienen Antwort Ralf!

ganze code kannst here siehst ...

noch habe ich hier gefragt und jemand ganz Unten geben einiger Vorschlag wie mit Modal mache kann..

Ich habe auf eine Webseite gesehen die ähnliche gebaut hat wie ich wünsche...ich habe mit Firefos > Extras > Web-Entwickler > Werkzeuge sein Code geprüft... er/sie hat mit jQuery gemacht, eine Screenshot..

ich denke das ist mehr kompliziert weiter mit Modal machen als versuche mit jQuery zu machen...

Das Probleme ist das es weiß nicht...😀

Ich habe nicht gut verstand was meinst mit

Ich würde an Deiner Stelle den Ordner anders nennen, oder das & als %26 maskieren.

ich habe in Wikipedia gesucht und auf der Tabelle in Relevante ASCII-Zeichen in Prozentdarstellung zeigt die Zeichnung & mit dem zahlt %26..

[Gunnar Bittersmann]

@@liebewinter

ganze code kannst here siehst ...

Das hat schon seine Bewandnis. Click da mal drauf … und ändere das in deinem Pen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[liebewinter]

Danke ich habe jetzt gemacht!

[Gunnar Bittersmann]

@@Rolf B

In einer URL sollte das & nur vorkommen, um Parameter im Query-Teil voneinander zu trennen.

Warum?

"/tachen_&_rucksacke/" - das funktioniert zwar, aber es ist verwirrend.

Mich verwirrt eher „tachen“.

Ich würde an Deiner Stelle den Ordner anders nennen

taschen_&_rucksäcke oder taschen_&_rucksaecke?

Ich würde aber keine Unterstriche verwenden.

Und auf das & kann man verzichten: taschen-und-rucksaecke oder taschen-rucksaecke.

oder das & als %26 maskieren.

Das nehmen einem die Browser wohl ab. Aber & sollte sowieso nicht unmaskiert im HTML stehen. Aber ja, in dem Kontext wäre %26 angebracht, nicht &.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

Warum?

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?

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?

Rolf

[liebewinter]

Geschafft ! 👍

So, ich habe auf eine andere Forum gefragt und have die losung mit JQuery gegeben..

so, das Code von eine Fenter,

<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>

Die jQuery code,

<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>

....und mein Geliebt Fenster..😀

Ich wünsche alle euch eine gesunde leben! das wichtiger für uns menschen, mehr als scheiße Geld....