twitter-bootstrap-3 - 单击链接启动模态窗口？ Bootstrap 3

Question

所以，我正在为我的 friend 制作这个网站，只是出于一种爱好。 我已经从 WrapBootstrap.com 实现了“循环” Bootstrap 主题 --> 链接:https://wrapbootstrap.com/theme/loop-agency-and-personal-theme-WB053H4T4

但是，在“服务”部分下，每个部分都有一个“阅读更多”功能。但默认情况下，此阅读更多链接不执行任何操作？

我非常希望它能弹出一个带有一些额外文本的模式窗口(因此是“阅读更多”)。

我试了又试，但我似乎无法让它发挥作用。你将如何完成这项任务？我该如何实现？

您可以在以下位置查看我的实时工作版本:http://flixberg.dk/Kasper_fysio/index.html

如何获得“阅读更多”按钮以启动包含“阅读更多”文本的模态窗口？

非常感谢。

有问题的代码如下，您可以在其中看到“阅读更多”:

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

Answer 1

您查看过 getbootstrap.com 吗？

它们会在页面上举例说明您要查找的内容。 http://getbootstrap.com/javascript/#modals

例如

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