Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 05.07.2015
Сообщений: 39
1

Всплывающее окно на CSS с чекбоксами внутри

31.01.2018, 21:22. Показов 948. Ответов 0
Метки нет (Все метки)

Приветствую, имеется вот такая конструкция
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="catalog-filter">
    <div class="catalog-filter-title">Фильтр:
    </div>
    <div class="filter-fields">
        <a class="support" tabindex="1">
            <div class="tip-click1 filter-item">Площадь
                <div class="tip1">
                    <input type="checkbox" name="1" value="1" checked>1<br>
                    <input type="checkbox" name="2" value="2">2<br>
                </div>
            </div>
        </a>
    </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
.catalog-filter {
    padding: 0 0 10px 0;
    margin: 30px 0 0 0;
    display: flex;
    flex-flow: row wrap;
    background-color: #f8f8f8;
    box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5);
}
 
.catalog-filter-title {
    line-height: 28px;
    margin: 10px 10px 0 20px;
    font-weight: 600;
    color: #333;
}
 
.support:focus .tip1 {
    display: block;
}
 
.support:focus .tip-click1{
    background: rgba(4, 190, 0, 0.58);
}
 
 
.filter-fields {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    flex: 1 1 auto;
}
 
.tip-click1 {  
    display: block;
    font-weight: bold;
    color:#444;
    position: relative;  
    text-align: center;
    background-color: rgba(95, 224, 92, 0.58);
    width: 80px;
    height: 25px;
    font-size: 14px;
    line-height: 26px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;        
}
 
.filter-item {    
    margin: 10px 12px 0px;
    height: 25px;    
    position: relative;
}
 
.tip1 {
    padding: 10px;
    min-width: 250px;
    display: none;
    position: absolute;
    border-radius: 2px;
    top: 30px;
    background: #fff;
    line-height: 60px;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: background .30s ease-in-out;
     -moz-transition: background .30s ease-in-out;
     -webkit-transition: background .30s ease-in-out;  
}
 
.tip1:before{
    position: absolute;
    content: '';
    width:0px;
    height: 0px;
    border:6px solid transparent;
    border-bottom-color:#fff;
    left:35px;
    top:-12px;
}
 
.tip1:after{
    width:100%;
    height:0px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}
все отлично работает, но проблема вот в чем, само всплывающее окно по клику не закрывается, но по клику на чекбокс в окне, сворачивается без возможности выбора. Как можно это победить, прошу помощи
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
31.01.2018, 21:22
Ответы с готовыми решениями:

Всплывающее окно с CF7 + CSS
На странице сейчас 2 кнопки под слайдером и ниже. Нужно чтобы всплывало окно Contact Form 7 но...

Всплывающее окно неработает CSS & Web.sitemap
Привет всем! Замучился до ужаса. Уже как неделю затратил на всплывающее окно. Проблема такова:...

css всплывающее окно с img поверх текущей страницы
Доброго дня: имеем конструкцию типа: HTML: &lt;section id=&quot;ph_main&quot; class=&quot;ph_main&quot;&gt; &lt;div...

Экспорт в XML treeview c чекбоксами (док внутри)
Добрый день! Есть treeView с корневыми нодами и ветками. У treeview включено свойство...

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
31.01.2018, 21:22

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Всплывающее окно при входе на сайт (windows окно)
Как сделать чтобы при переходе на страницу появлялось такое же всплывающее окно как здесь? ...

Всплывающее окно перекрывает окно отчёта
Доброго времени суток форумчане! Помогите пожалуйста победит всплывающию окошку, сделать так чтобы...

Всплывающее уведомление внутри формы
В SQLiteManager для Firefox в окне добавления новой записи в БД при добавлении всплывает...

Всплывающее окно
Здравствуйте, как можно сделать что бы при нажатии на кнопку &quot;регистрация&quot; появлялось окно с...

Всплывающее окно
как создать простое всплывающее окно с информацией типа :&quot;Ваша заявка отправлена!&quot; в html/css?

Всплывающее окно
Здраствуйте. Ребят мне нужна помощь: нужен код чтобы всплывающее окно открывалось при загрузке...


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

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.