Launch modal window on link click? Bootstrap 3

问题

So, I'm making this website for friend of mine, just as a hobby. I have implemented the "Loop" bootstrap theme from WrapBootstrap.com --> link: https://wrapbootstrap.com/theme/loop-agency-and-personal-theme-WB053H4T4

However, under the "Services" section there is a "Read more" function for each section. But by default this read more link doesn't do anything ?

I would very much like it to pop up a modal window with some extra text (hence "Read more").

I have tried and tried, but I can't seem to get it to work. How would you approach this task? How should I implement it?

You can see my live, working version at: http://flixberg.dk/Kasper_fysio/index.html

How can I get the "Read more" buttons to launch a modal window which will contain the "Read more" text?

Thank you very much.

The code in question, is the following, where you can see the "Read more" :

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

回答1:

Did you check out getbootstrap.com?

They give examples to what you are looking for right on the page. http://getbootstrap.com/javascript/#modals

For Instance

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

来源：https://stackoverflow.com/questions/24235097/launch-modal-window-on-link-click-bootstrap-3

标签

twitter-bootstrap-3

bootstrap-modal