• Страница 1 из 1
  • 1
Форум » Веб-разработка » Вопросы по uCoz » Вывод "Краткого описания" в модокно или спойлер
Вывод "Краткого описания" в модокно или спойлер
torrcatalog
Дата: Пятница, 2018-06-08, 13:32 | Сообщение 1
Пользователи
Сообщений:3
Награды: 0


Добрый день! Делаю музыкальный "торрент", основной модуль каталог файлов, возник вопрос
Сделал "Краткое описание материала" под "трек лист", теперь как его корректно вывести на главную страницу в таком формате



Дело в том, что сейчас выводит что в js окнах, что на одном css - "по порядку", напротив какого материала не нажимай будет выводить "трек лист" с 1 материала и по порядку в низ.

Или может кто подскажет более удобное решение, без использования "Краткого описания материала"
Прикрепления: 5091046.png(49.3 Kb)
Страна: (UA)
Kosten
Дата: Пятница, 2018-06-08, 14:43 | Сообщение 2
Администраторы
Сообщений:18833
Награды: 55


torrcatalog, не знаком с такой тематикой, как понял, вам нужно вывести на главную страницу информацию, так это можно сделать через модальное окно, где изначально все прописать, и под клик поставить.
Страна: (RU)
torrcatalog
Дата: Пятница, 2018-06-08, 16:15 | Сообщение 3
Пользователи
Сообщений:3
Награды: 0


Kosten, Вот именно через него я и делал, вот скрипт вывода

Код
<div id="block" style="display:none; padding: 20px; overflow: auto; background-color:#ffffff; width:500px; height:450px;">
$MESSAGE$
</div>
<a class="ulightbox" href="#block">Трек-лист</a>


Но если я нажимаю допустим на 3 сборник музыки, оно мне показывает трек-лист первого сборника.
Вот под хайд если можете посмотрите пожалуйста
Доступно только для пользователей
Страна: (UA)
Kosten
Дата: Пятница, 2018-06-08, 16:19 | Сообщение 4
Администраторы
Сообщений:18833
Награды: 55


torrcatalog, это через стандартное окно делаете, вот попробуйте подключить, как пример это модальное окно, которое на CSS работает.

Вот второе модальное окно, где по установке на сайт проще идет.
Страна: (RU)
torrcatalog
Дата: Пятница, 2018-06-08, 16:44 | Сообщение 5
Пользователи
Сообщений:3
Награды: 0


Kosten, Теперь всегда открывает информацию с последнего загруженного материала.
Я с зорнета, уже все подобные перепробовал, как и с других ресурсов, не один не хочет выводить, только через спойлер, но выглядит очень убого.

Добавлено (08.06.2018, 16:44)
---------------------------------------------
Все решил проблему, кому интересно будет такое подобное, можно сначала код $MESSAGE$ или любой другой засунуть в спойлер ( в настройках его развернуть и убрать по желанию "шапку") потом спойлер засунуть в модальное окно.

Страна: (UA)
Kosten
Дата: Пятница, 2018-06-08, 18:36 | Сообщение 6
Администраторы
Сообщений:18833
Награды: 55


torrcatalog, вот можете это модальное окно задействовать, так как идет под одной палитрой цвета, это светлый оттенок, который по эффекту появляется нормально. Который был проверен на работоспособность, что все отлично по функционалу работает.



Установка:

По месту HTML:

Код
<h1 style="text-align: center; margin-top: 20px; margin-bottom: 20px;">Модальное окно на чистом CSS</h1>
<div class="container">
    <div style="text-align: center;">
        <a href="#openmazabun_kuverun">Открыть модальное окно</a>
    </div>
    <div id="openmazabun_kuverun" class="mazabun_kuverun">
        <div class="mazabun_kuverun-dialog">
            <div class="mazabun_kuverun-content">
                <div class="mazabun_kuverun-header">
                    <h3 class="mazabun_kuverun-title">ZORNET.RU</h3>
                    <a href="#close" title="Close" class="close">×</a>
                </div>
                
                
                    <div class="mazabun_kuverun-body">
                    Полное отстранение Valve от самой концепции насыщения контента на любом значащем уровне отбрасывает ворота на мошенничество и жестокое обращение. Но эй. Это поможет компании принять более жесткие решения.
                </div>
            </div>
        </div>
    </div>
</div>


JavaScript - где в низ сайта можно прописать, чтоб на всех страницах окно показывалось.

Код
<script>
document.addEventListener("DOMContentLoaded", function () {
        var scrollbar = document.body.clientWidth - window.innerWidth + 'px';
        console.log(scrollbar);
        document.querySelector('[href="#openmazabun_kuverun"]').addEventListener('click', function () {
            document.body.style.overflow = 'hidden';
            document.querySelector('#openmazabun_kuverun').style.marginLeft = scrollbar;
        });
        document.querySelector('[href="#close"]').addEventListener('click', function () {
            document.body.style.overflow = 'visible';
            document.querySelector('#openmazabun_kuverun').style.marginLeft = '0px';
        });
    });
</script>


CSS

Код
   /* свойства модального окна по умолчанию */
        .mazabun_kuverun {
            position: fixed; /* фиксированное положение */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.5); /* цвет фона */
            z-index: 1050;
            opacity: 0; /* по умолчанию модальное окно прозрачно */
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in; /* анимация перехода */
            pointer-events: none; /* элемент невидим для событий мыши */
        }

        /* при отображении модального окно */
        .mazabun_kuverun:target {
            opacity: 1;
            pointer-events: auto;
            overflow-y: auto;
        }

        /* ширина модального окна и его отступы от экрана */
        .mazabun_kuverun-dialog {
            position: relative;
            width: auto;
            margin: 10px;
        }

        @media (min-width: 576px) {
            .mazabun_kuverun-dialog {
                max-width: 500px;
                margin: 30px auto;
            }
        }

        /* свойства для блока, содержащего контент модального окна */
        .mazabun_kuverun-content {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: .3rem;
            outline: 0;
        }

        @media (min-width: 768px) {
            .mazabun_kuverun-content {
                -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
                box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            }
        }

        /* свойства для заголовка модального окна */
        .mazabun_kuverun-header {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: 15px;
            border-bottom: 1px solid #eceeef;
        }

        .mazabun_kuverun-title {
            margin-top: 0;
            margin-bottom: 0;
            line-height: 1.5;
            font-size: 1.25rem;
            font-weight: 500;
        }

        /* свойства для кнопки "Закрыть" */
        .close {
            float: right;
            font-family: sans-serif;
            font-size: 24px;
            font-weight: 700;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            opacity: .5;
            text-decoration: none;
        }

        /* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
        .close:focus, .close:hover {
            color: #000;
            text-decoration: none;
            cursor: pointer;
            opacity: .75;
        }

        /* свойства для блока, содержащего основное содержимое окна */
        .mazabun_kuverun-body {
            position: relative;
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 15px;
            overflow: auto;
        }


Форма и дизайн можно изменить с стилях CSS.

Демонстрация
Прикрепления: 6325779.png(14.6 Kb)
Страна: (RU)
-SAM-
Дата: Суббота, 2018-06-09, 00:05 | Сообщение 7
Друзья сайта
Сообщений:463
Награды: 18


Куча всего написано, а по теме - ноль. Единственное, что нужно было сделать - это прописать id="block$ID$" (да будет известно, что в html нельзя присваивать несколько одних и тех же id-интификаторов на странице; то есть там должно идти #block$ID$, иначе понятное дело, что при клике переход будет к самому верхнему в исходном коде элементу с таким id).

UPD.: Kosten, это не решение в данном случае прописывать такой кусок кода в вид материала, всё гораздо проще делается. И да, никто не просил искать само окно - был поставлен вопрос. Ну, а что нашли и опубликовали - это просто будет кому-то еще полезно.




Сообщение отредактировал
-SAM- - Суббота, 2018-06-09, 01:20
Страна: (UA)
Kosten
Дата: Суббота, 2018-06-09, 00:12 | Сообщение 8
Администраторы
Сообщений:18833
Награды: 55


-SAM-, но почему ноль, пока разумел, то нашел модальное окно. которое по пути закинул.)
Страна: (RU)
Форум » Веб-разработка » Вопросы по uCoz » Вывод "Краткого описания" в модокно или спойлер
  • Страница 1 из 1
  • 1
Поиск: