Запускать модальное окно при клике по ссылке? Начальная загрузка 3

Итак, я делаю этот сайт для моего друга, просто как хобби. Я реализовал тему начальной загрузки "Loop" с сайта WrapBootstrap.com --> ссылка: 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>

bootstrap-modal twitter-bootstrap-3
person Daniel J. Bertelsen    schedule 15.06.2014    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вы проверяли 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>
person Tony    schedule 15.06.2014
comment
Да, я сделал. Но я просто не могу понять, как объединить/интегрировать предоставленный код с кнопкой «Подробнее» на сайте, который я создаю. Как мне обойти это? А как насчет показанного выше модального идентификатора (модальное исчезновение) и класса (myModal) - я полагаю, что это не идентификаторы / классы Bootstrap по умолчанию? - person Daniel J. Bertelsen; 16.06.2014
comment
Вы даете Modal идентификатор, который хотите. А затем в кнопке вы устанавливаете data-target=#[ModalID to Pop]. Например, у вашего модального окна ID=readMoreModal1 ваша цель данных для триггера кнопки будет data-target='#readMoreModal1. Вы либо создаете разные модальные окна для каждой кнопки «Подробнее», либо меняете содержимое одного модального окна при нажатии кнопки. Моя работа блокирует ваш сайт, иначе я бы посмотрел на него. - person Tony; 16.06.2014