提问者:小点点

点击链接启动模式窗口?引导程序3


所以,我为我的朋友制作这个网站,只是作为一种爱好。我已经从WrapBootstrap实现了“循环”引导主题。com--

但是,在“服务”部分下,每个部分都有一个“阅读更多”功能。但默认情况下,此“阅读更多”链接不起任何作用?

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

我试了又试,但似乎无法使它发挥作用。你将如何完成这项任务?我应该如何实施它?

您可以在以下位置查看我的实时工作版本: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>

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