Starten modales Fenster auf den link klicken? Bootstrap 3

So, ich bin dieser website für Freund von mir, nur als hobby.
Ich habe implementiert die "Loop" - bootstrap-theme aus WrapBootstrap.com --> link: https://wrapbootstrap.com/theme/loop-agency-and-personal-theme-WB053H4T4

Jedoch unter dem Abschnitt "Services" gibt es einen "weiterlesen" - Funktion, die für jeden Abschnitt. Aber standardmäßig ist diese weiterlesen-link nicht was tun ?

Ich würde es sehr gerne, es öffnet sich ein modal-Fenster mit einigen extra-text (daher "mehr Lesen").

Ich habe versucht und versucht, aber ich kann nicht scheinen, um es zu arbeiten. Wie würden Sie diese Aufgabe? Wie sollte ich das umsetzen?

Können Sie sehen, mein Leben, arbeiten, version: http://flixberg.dk/Kasper_fysio/index.html

Wie bekomme ich den "Read more" - buttons starten, wird ein modales Fenster mit den "weiterlesen" - text?

Danke Ihnen sehr.

Den code in Frage, ist die folgende, wo Sie sehen können, die "mehr Lesen" :

<!-- SERVICES -->
        <div id="services" class="section darker services" >
            <div class="container">
                <div class="section-heading">
                    <h2>SERVICES</h2>
                    <p>Når kun det bedste er godt nok - din krop og fysik er min priroritet</p>
                    <hr />
                </div>
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="service-item">
                                <span class="icon-heart service-icon"></span>
                                <div class="service-text">
                                    <h3>Idrætsskader</h3>
                                    <p>Behandling af idrætsskader er væsentligt for din fremtidige præstation. Med omhyggelig behandling og genoptræning hos Kasper Bisgaard kommer du hurtigt på fode igen, og vi hjælper selvfølgelig med at forebygge nye skader.</p>
                                    <a href="#" class="read-more"><span>Read more ...</span> <i class="i fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

InformationsquelleAutor Daniel J. Bertelsen | 2014-06-15

  1. 6

    Haben Sie check-out getbootstrap.com?

    Geben Sie Beispiele, was Sie suchen, rechts auf der Seite.
    http://getbootstrap.com/javascript/#modals

    Zum Beispiel

    <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    Jup, habe ich. Aber ich kann einfach nicht herausfinden, wie zu kombinieren/integrieren Sie den code in der "weiterlesen" - button auf der Website, die ich Baue. Wie soll ich umgehen? Und was ist mit dem oben gezeigten modal-id ("modal fade") und Klasse ("myModal") - ich glaube, dass diese nicht-Bootstrap-default-id ' s/Klassen?
    Sie geben die Modal ist eine ID, die Sie wollen. Und dann in der Schaltfläche, die Sie setzen data-target="#[ModalID Pop"]" Zum Beispiel, Sie modal hat ID="readMoreModal1" Ihre Daten-Ziel für den Auslöser wäre data-target= "#readMoreModal1". Sie erstellen entweder eine andere modale für jeden lese-mehr-Schaltfläche, oder ändern Sie den Inhalt einer modalen, wenn auf die Schaltfläche geklickt wird. Meine Arbeit blockiert Ihre Website ansonsten würde ich gehen, es zu betrachten.
    Problem gelöst! Ich habe es!!!! Yay!! 😀

    InformationsquelleAutor Tony

Schreibe einen Kommentar