在链接上单击启动模式窗口?引导程序3 [英] Launch modal window on link click? Bootstrap 3

问题描述

所以，我正在为我的一个朋友创建这个网站，就像一个业余爱好一样. 我已经从WrapBootstrap.com->链接实现了循环"引导主题: https://wrapbootstrap.com/theme/loop-agency-and-personal-theme-WB053H4T4

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?

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

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?

非常感谢您.

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

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>

推荐答案

您是否签出了getbootstrap.com?

Did you check out getbootstrap.com?

在页面上，它们为您提供了所需的示例. http://getbootstrap.com/javascript/#modals

They give examples to what you are looking for right on the page. 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>

这篇关于在链接上单击启动模式窗口?引导程序3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！