Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.92/13: Рейтинг темы: голосов - 13, средняя оценка - 4.92
0 / 0 / 0
Регистрация: 05.11.2016
Сообщений: 64

Полоса прокрутки в модальном окне

24.11.2018, 17:00. Показов 2575. Ответов 6
Метки css, html (Все метки)
Студворк — интернет-сервис помощи студентам
Подскажите как можно полосу прокрутки подвинуть влево и изменить у неё высоту?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<tr>
                    <td colspan="2"><a class="LinkModalDialog" href="#openModal">Базовая</a></td>
                    
                    <div id="openModal" class="modalDialog">
                        <div>
                            <a href="#close" title="Закрыть" class="close">X</a>
                            <h4 class="CharacteristicsZagalovok">Технические характеристики</h4>
                            <!--Двигатель-->
                            <div class="Сolumn1">
                                <p class="Text_Header_Сolumn1">***Двигатель</p>
                                <p class="TextCharacteristic_Сolumn1">***Тип двигателя</p>
                                <p class="TextCharacteristic_Сolumn1">***Количество цилиндров</p>
                                <p class="TextCharacteristic_Сolumn1">***Количество клапанов на цилиндр</p>
                                <p class="TextCharacteristic_Сolumn1">***Рабочий объем</p>
                                <p class="TextCharacteristic_Сolumn1">***Конфигурация</p>
                                <p class="TextCharacteristic_Сolumn1">***Максимальная мощность</p>
                                <p class="TextCharacteristic_Сolumn1">***Максимальный крутящий момент</p>
                                <p class="TextCharacteristic_Сolumn1">***Тип впуска</p>
                                <p class="TextCharacteristic_Сolumn1">***Наддув</p>
                            </div>
                            <div class="Сolumn2">
                                <p class="Text_Header_Сolumn2">*********-</p>
                                <p class="TextCharacteristic_Сolumn2">*********Бензиновый</p>
                                <p class="TextCharacteristic_Сolumn2">*********3</p>
                                <p class="TextCharacteristic_Сolumn2">*********4</p>
                                <p class="TextCharacteristic_Сolumn2">*********1499 см³</p>
                                <p class="TextCharacteristic_Сolumn2">*********Рядный</p>
                                <p class="TextCharacteristic_Сolumn2">*********136 л.с.  при 4400 об/мин</p>
                                <p class="TextCharacteristic_Сolumn2">*********220 Н∙м при 1250 об/мин</p>
                                <p class="TextCharacteristic_Сolumn2">*********Непосредственный впрыск</p>
                                <p class="TextCharacteristic_Сolumn2">*********✓</p>
                            </div>
                            <!--Кузов-->
                            <div class="Сolumn1">
                                <p class="Text_Header_Сolumn1">***Кузов</p>
                                <p class="TextCharacteristic_Сolumn1">***Количество мест</p>
                                <p class="TextCharacteristic_Сolumn1">***Длина</p>
                                <p class="TextCharacteristic_Сolumn1">***Ширина</p>
                                <p class="TextCharacteristic_Сolumn1">***Высота</p>
                                <p class="TextCharacteristic_Сolumn1">***Колесная база</p>
                                <p class="TextCharacteristic_Сolumn1">***Колея передних колес</p>
                                <p class="TextCharacteristic_Сolumn1">***Колея задних колес</p>
                                <p class="TextCharacteristic_Сolumn1">***Дорожный просвет</p>
                                <p class="TextCharacteristic_Сolumn1">***Диаметр разворота</p>
                                <p class="TextCharacteristic_Сolumn1">***Объем багажника</p>
                                <p class="TextCharacteristic_Сolumn1">***Объем багажника максимальный</p>
                                <p class="TextCharacteristic_Сolumn1">***Снаряженная масса</p>
                                <p class="TextCharacteristic_Сolumn1">***Полная масса</p>
                                <p class="TextCharacteristic_Сolumn1">***Грузоподъемность</p>
                            </div>
                            <div class="Сolumn2">
                                <p class="Text_Header_Сolumn4">*********-</p>
                                <p class="TextCharacteristic_Сolumn2">*********5</p>
                                <p class="TextCharacteristic_Сolumn2">*********4439 мм</p>
                                <p class="TextCharacteristic_Сolumn2">*********1821 мм</p>
                                <p class="TextCharacteristic_Сolumn2">*********1598 мм</p>
                                <p class="TextCharacteristic_Сolumn2">*********2670 мм</p>
                                <p class="TextCharacteristic_Сolumn2">*********1561 мм</p>
                                <p class="TextCharacteristic_Сolumn2">*********1562 мм</p>
                                <p class="TextCharacteristic_Сolumn2">*********183 мм</p>
                                <p class="TextCharacteristic_Сolumn2">*********11.4 л</p>
                                <p class="TextCharacteristic_Сolumn2">*********505 л</p>
                                <p class="TextCharacteristic_Сolumn2">*********1550 л</p>
                                <p class="TextCharacteristic_Сolumn2">*********1430 кг</p>
                                <p class="TextCharacteristic_Сolumn2">*********2005 кг</p>
                                <p class="TextCharacteristic_Сolumn2">*********575 кг</p>
                            </div>
                        </div>
                    </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    display: none;
    pointer-events: none;
    
}
 
.modalDialog:target {
    display: block;
    pointer-events: auto;
}
 
.modalDialog > div {
    max-width: 520px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 600px;
}
 
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    -moz-box-shadow: 1px 1px 3px #000;
}
 
.close:hover {
    background: #00d9ff;
}
 
.LinkModalDialog {
    color: #000000;
    text-decoration: none;
}
 
.LinkModalDialog:visited {
    color: #000000;
}
 
.LinkModalDialog:hover {
    color: #ff0000;
}
 
.CharacteristicsZagalovok {
    text-align: center;
}
 
.Сolumn1 {
    position: absolute;
}
 
.Сolumn2 {
    position: relative;
    margin-left: 260px;
}
 
.Text_Header_Сolumn1 {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
}
 
.Text_Header_Сolumn2 {
    margin-top: 38px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
}
 
.Text_Header_Сolumn4 {
    margin-top: 32px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    padding-top: 5px;
    padding-bottom: 5px;
}
 
.Text_Header_Сolumn1 {
    font-weight: bold;
}
 
.Text_Header_Сolumn2 {
    font-weight: bold;
}
Миниатюры
Полоса прокрутки в модальном окне  
0
Лучшие ответы (1)
Сообщение: #13093338
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
 24.11.2018, 17:00
Ответы с готовыми решениями:

CSS. Полоса прокрутки в модальном окне
Здравствуйте, посодействуйте в следующем: имеется код, появляющееся окно имеет фиксированную позицию как добавить к этому окну полосы...

Полоса прокрутки
Помогите плиз! Вот мой сайт - http://candywonderland.narod.ru/ Видите,нижняя полоса прокрутка широкая какая-то.Её вообще не должно...

Полоса прокрутки
Друзья подскажите как можна убрать нижнюю полосу прокрутки с веб страници

6
81 / 49 / 34
Регистрация: 22.05.2018
Сообщений: 192
24.11.2018, 19:11
Я подправил, как мог Ваш код. Посмотреть можно здесь. Я бы сделал таблицей. Или Вы имели ввиду, сдвинуть полосу прокрутки, чтобы закрывающий крестик видно было?!
Миниатюры
Полоса прокрутки в модальном окне  
0
0 / 0 / 0
Регистрация: 05.11.2016
Сообщений: 64
24.11.2018, 19:39  [ТС]
Таблицей я пробовал, но почему то она не появляется в модальном окне.

Я хотел сделать полосу прокрутки так же как на фото, но не представляю как.
Миниатюры
Полоса прокрутки в модальном окне  
0
81 / 49 / 34
Регистрация: 22.05.2018
Сообщений: 192
25.11.2018, 03:26
Сделал таблицей. Смотрим здесь.
Миниатюры
Полоса прокрутки в модальном окне  
0
81 / 49 / 34
Регистрация: 22.05.2018
Сообщений: 192
25.11.2018, 03:48
Или другой вариант
Миниатюры
Полоса прокрутки в модальном окне  
0
0 / 0 / 0
Регистрация: 05.11.2016
Сообщений: 64
25.11.2018, 13:53  [ТС]
Вот что происходит когда делаю таблицей
Миниатюры
Полоса прокрутки в модальном окне  
0
81 / 49 / 34
Регистрация: 22.05.2018
Сообщений: 192
25.11.2018, 14:08
Лучший ответ Сообщение было отмечено Dmitriy45 как решение

Решение

У Вас явно таблица находится вне модального окна. Вот вставьте код вместо разметки вашего окна в html и стилей в css. Должно получиться. Остальные окна делайте по образу и подобию этого дорабатываю по себя.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<button><a class="LinkModalDialog" href="#openModal">Базовая</a></button>
        <div id="openModal" class="modalDialog">
            <div class="wrapper1">
                <a href="#close" title="Закрыть" class="close">X</a>
                <div class="wrapper2">                              
                    <table>
                        <caption>Технические характеристики</caption>
                        <tr><th>***Двигатель</th><th>*********-</th></tr>
                        <tr class="padding-top-for-first-tr"><td>***Тип двигателя</td><td>*********Бензиновый</td></tr>
                        <tr><td>***Количество цилиндров</td><td>*********3</td></tr>
                        <tr><td>***Количество клапанов на цилиндр</td><td>*********4</td></tr>
                        <tr><td>***Рабочий объем</td><td>*********1499 смВі</td></tr>
                        <tr><td>***Конфигурация</td><td>*********Рядный</td></tr>
                        <tr><td>***Максимальная мощность</td><td>*********136 л.с. при 4400 об/мин</td></tr>
                        <tr><td>***Максимальный крутящий момент</td><td>*********220 Нв€™м    при 1250 об/мин</td></tr>
                        <tr><td>***Тип впуска</td><td>*********Непосредственный впрыск</td></tr>
                        <tr><td>***Наддув</td><td>*********вњ“</td></tr>
                        
                        <tr><th>***Кузов</th><th>*********-</th></tr>
                        <tr><td>***Количество мест</td><td>*********5</td></tr>
                        <tr><td>***Длина</td><td>*********4439 мм</td></tr>
                        <tr><td>***Ширина</td><td>*********1821 мм</td></tr>
                        <tr><td>***Высота</td><td>*********1598 мм</td></tr>
                        <tr><td>***Колесная база</td><td>*********2670 мм</td></tr>
                        <tr><td>***Колея передних колес</td><td>*********1561 мм</td></tr>
                        <tr><td>***Колея задних колес</td><td>*********1562 мм</td></tr>
                        <tr><td>***Дорожный просвет</td><td>*********183 мм</td></tr>
                        <tr><td>***Диаметр разворота</td><td>*********11.4 л</td></tr>
                        <tr><td>***Объем багажника</td><td>*********505 л</td></tr>
                        <tr><td>***Объем багажника максимальный</td><td>*********1550 л</td></tr>
                        <tr><td>***Снаряженная масса</td><td>*********1430 кг</td></tr>
                        <tr><td>***Полная масса</td><td>*********2005 кг</td></tr>
                        <tr><td>***Грузоподъемность</td><td>*********575 кг</td></tr>
                    </table>
                </div>
            </div>
        </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

.modalDialog {
                position: fixed;
                font-family: Arial, Helvetica, sans-serif;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: rgba(0, 0, 0, 0.8);
                z-index: 99999;
                -webkit-transition: opacity 400ms ease-in;
                -moz-transition: opacity 400ms ease-in;
                transition: opacity 400ms ease-in;
                display: none;
                pointer-events: none;           
            }
            .modalDialog:target {
                display: block;
                pointer-events: auto;
            }
            .close {
                background: #606061;
                color: #FFFFFF;
                line-height: 25px;
                position: absolute;
                right: -12px; /*Регулировка крестика относительно модалки*/
                top: -12px; /*Регулировка крестика относительно модалки*/
                text-align: center;             
                width: 24px;
                text-decoration: none;
                font-weight: bold;
                border-radius: 12px;
                -webkit-border-radius: 12px;
                -moz-border-radius: 12px;
                box-shadow: 1px 1px 3px #000;
                -webkit-box-shadow: 1px 1px 3px #000;
                -moz-box-shadow: 1px 1px 3px #000;
            }
         
            .close:hover {
                background: #00d9ff;
            }
            .LinkModalDialog {
                color: #000000;
                text-decoration: none;
            }
             
            .LinkModalDialog:visited {
                color: #000000;
            }
             
            .LinkModalDialog:hover {
                color: #ff0000;
            }               
            .wrapper1 { 
                position: relative;
                top: 20%;               
                max-width: 520px;
                margin: 0 auto; 
                                padding-top: 15px;  /*Регулировка отступа в верх от скролла*/   
                padding-right: 15px; /*Регулировка отступа в право от скролла*/
                background: #fff;
                background: -moz-linear-gradient(#fff, #999);
                background: -webkit-linear-gradient(#fff, #999);
                background: -o-linear-gradient(#fff, #999);  
                border-radius: 10px;
            }
            .wrapper2 {             
                overflow-x: hidden;
                overflow-y: auto;
                max-width: 520px;                       
                padding: 5px 20px 13px 20px;                
                border-radius: 10px;
                background: #fff;
                background: -moz-linear-gradient(#fff, #999);
                background: -webkit-linear-gradient(#fff, #999);
                background: -o-linear-gradient(#fff, #999);  
                max-height: 600px;              
            }
            table, tr, td {                 
                border-collapse:collapse;
            }
            table {
                
            }
            caption {
                text-align: center;
                vertical-align: middle;
                font-weight: bold;
                line-height: 60px;
                height: 60px;
                
            }
            tr {
                height: 60px;
            }
                   .padding-top-for-first-tr {
                padding-top: 10px;
            }
            th {
                border-top: 2px solid #000000;
                border-bottom: 2px solid #000000;
                text-align: left;               
            }
            td {
                text-align: left;
                vertical-align: top;
            }
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
 25.11.2018, 14:08
Помогаю со студенческими работами здесь

Полоса прокрутки
Доброго времени суток, такая ситуация. Практикую понемногу сайтостроение посредством редактирования готовых шаблонов и вот столкнулся с...

Полоса прокрутки
Здравствуйте! Сайт на Битриксе. Нужно реализовать полосу прокрутки для новостей. Не уверена, что правильно выбрала тему, но думаю, что...

Полоса прокрутки
После того как закрепила фоновый рисунок, чтоб никуда не сьезжал. Пропала прокрутка, при уменьшении окна браузера, правая часть сайта...

Горизонтальная полоса прокрутки
Всем привет. Народ, я вроде бы размеры всех блоков делал согласно размеров окна браузера, но вот горизонтальная полоса прокрутки всё равно...

Полоса прокрутки в таблице
Есть такая таблица, в хтмл прописывается шапка, строки создаются динамически пользователем(в tbody) Как сделать вертикальную полосу...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
 http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru