2016-10-29 15 views
0

Burger-Symbol an der Spitze. Ich habe bootstrap modal für Menü verwendet.Bootstrap Modal Nachladen Seite

Wenn Sie auf Burger-Symbol klicken, öffnet es Modell mit Links. Dieses Modal enthält die Schaltfläche "Schließen" (x). Wenn Sie auf die Schaltfläche zum Schließen klicken, wird auf die Website umgeleitet.

Wenn Sie auf Links auf Modal jetzt klicken, laden Sie die ganze Seite neu und leiten Sie dann zu diesem bestimmten Link um.

Mein Problem ist: wenn Sie auf diesen Link klicken, sollte er auf Particular Link umleiten, ohne neu zu laden.

Schwierigkeiten, diese Aufgabe zu lösen:

  1. Wenn Sie gleiche Ereignis wie Schließen-Schaltfläche Feuer auf die Links sie auf der Website weitergeleitet wird.

  2. Klicken Sie auf diesen Link, wenn Sie Popup per CSS manuell schließen, geht die ganze Website in den Hintergrundmodus (Einblenden). Und wenn Sie diesen Hintergrund-Modus manuell als Scroll-Leiste entfernen, funktioniert nicht.

Aktuelle Code in dieser Website:

Wenn Klick auf dem Link, id dieser Abteilung zu funktionieren und dann Popup-modal übergeben wird manuell entfernen, dann ganze Seite neu zu laden und dann auf diese bestimmte Id umgeleitet.

Mein Problem. : Ich möchte die Seite nicht laden.

Antwort

0

Ich denke, das ist, was Sie wollen:

<script> 
    $(document) 
     .ready(function() { 
      $('#btnGoTo') 
       .click(function() { 
        $('#loginModal').modal('toggle'); 
       }); 
     }); 
</script> 

<button class="btn btn-success" data-target="#loginModal" data-toggle="modal">Open modal</button> 

<div class="modal fade" id="loginModal" tabindex="-1"> 
    <a id="btnGoTo" class="btn btn-success" href="#goTo">Klick me</a> 
</div> 

<div id="goTo"> 
    go to text 
</div> 

Wenn Sie im Modal mit der ID „GoTo“ ohne Neuladen der Seite an den div geht auf den Link klicken, um die modalen schließt und den Browser. Zum Formatieren des Modales können Sie die Bootstrap-Klasse modal-dialog, modal-content und modal-header

verwenden