Бутстрап модальный "страницы" - PullRequest
0 голосов
/ 05 декабря 2018

Как я могу создать режим просмотра "страницы" на модале начальной загрузки?

Этот тип потока используется во многих мобильных приложениях, но, глядя на компоненты Bootstrap, я не мог понятькак сделать этот тип потока или если он даже поддерживает его.

Очень предпочтительно, используя только ванильный Bootstrap и почти без JavaScript.

enter image description here enter image description here

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Я закончил тем, что создал небольшой фрагмент javascript / css, чтобы сделать это проще, используя только html.

Фрагмент:

document.body.addEventListener('click', evt => {
    if(evt.target.matches('.paginator-button')){
    const target = evt.target;
    const href = target.getAttribute("href");
    const activePage = target.closest('.paginator.paginator-active');
    activePage.classList.remove('paginator-active');
    activePage.parentElement.querySelector(href).classList.add('paginator-active');
  }
});

Css:

.paginator{
  display : none;
}
.paginator-active{
  display : inherit;
}

Пример использования:

.paginator элементы должны быть братьями и сестрами

.paginator-button должны быть дочерними элементами .paginator

<div class="paginator paginator-active" id="pageHome">
  <button class="paginator-button" href="page2">To Page 2</button>
</div>
<div class="paginator paginator-active" id="page2">
  <button class="paginator-button" href="pageHome">To Home</button>
</div>

Обычная JS Fiddle: http://jsfiddle.net/ppgab/3yzxecv7/7/

JQuery Fiddle: http://jsfiddle.net/ppgab/1Luvwar5/3/

0 голосов
/ 05 декабря 2018

Я делаю это довольно часто, но боюсь, что вам, вероятно, придется использовать JavaScript.

В модале вы сначала покажете только первую «страницу» и у вас будет несколько скрытых элементов div, содержащихВаши дополнительные «страницы».

Для начала добавьте «скрытый» класс на дополнительные страницы, чтобы они отображали: нет.

Когда пользователь нажимает «На вторую страницу», выскрыть отображаемый в данный момент div, добавив в него скрытый класс.Затем вы удаляете «скрытый» класс из div / страницы, которую вы хотите отобразить, делая его видимым.

Ваша структура HTML:

<div class="page-one">
Page One
</div>

<div class="page-two hidden">
Page Two
</div>

Тогда, возможно, какой-то jQuery, как это для каждой кнопки:

$(".btn-show-page-two").on( "click", function() {
        $(".page-one").addClass("hidden");
        $(".page-two").removeClass("hidden");
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...