Question

所以，我正在为我的朋友创建这个网站，这只是一个爱好。我已经实现了WrapBootstrap.com的“循环”引导主题 - ＆gt;链接：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

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>

链接点击启动模式窗口？ Bootstrap 3

1 个答案: