点击链接启动模态窗口?引导3

Question

所以，我正在为我的朋友做这个网站，只是作为一个爱好。我已经从WrapBootstrap.com实现了"循环"引导主题->链接:https://wrapbootstrap.com/theme/loop-agency-and-personal-theme-WB053H4T4

然而，在"服务"部分，每个部分都有一个"阅读更多"功能。但是默认情况下这个read more链接不做任何事情

我非常希望它弹出一个模态窗口与一些额外的文本(因此"阅读更多")。

我试了又试，但我似乎不能让它工作。你将如何完成这项任务?我应该如何实现它?

你可以看到我的现场，工作版本:http://flixberg.dk/Kasper_fysio/index.html

我怎么能得到"阅读更多"按钮启动一个模态窗口，其中将包含"阅读更多"文本?

非常感谢。

所讨论的代码如下，在这里您可以看到"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>

Answer 1

你看过getbootstrap.com吗?

他们在页面上给出了你正在寻找的例子。http://getbootstrap.com/javascript/情态动词

例如

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