liebewinter: Bootstrap 4 Modal neben dem Triggerelement öffnen

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

Fenster mit dem Produkt

wird das Modal Fenster ganz Oben geöffnet..

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

webseite gehe nach oben, wenn Modal fenster geht nach unten

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

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

    --
    sumpsi - posui - obstruxi
    1. 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..

      java script code um das fenster zu öffnen

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

      1. @@liebewinter

        ganze code kannst here siehst ...

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

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

        --
        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. (@Grantscheam)
        1. Danke ich habe jetzt gemacht!

    2. @@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 &amp;.

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

      --
      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. (@Grantscheam)
      1. 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

        --
        sumpsi - posui - obstruxi
  2. 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..😀

    das fenster dem ich bekomme

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