Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 19.01.2018
Сообщений: 18

Всплывающее окно

19.03.2019, 19:36. Показов 839. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день.
Проблема такая:

Решил сделать маленький бложек практики ради...
Надо было реализовать выпадающее меню, которое появлялось бы при клике по кнопке-бутерброд.
Все вроде сделал, менюшка даже появляется.... но буквально на долю секунды. Не могу понять, с чем это связано. Возможно, конфликт с CSS кодом где-то, а может и нет. Есть идеи?

HTML5
1
<a class="gmbB"  href="" onclick="showNavSmall();">& #9776;</a>
CSS
1
2
3
.gmbB{
    display:none;
}
JavaScript
1
2
3
4
function showNavSmall(){
    var elem = document.getElementById("gmbB");
    elem.style.cssText="display: block;";
}
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
19.03.2019, 19:36
Ответы с готовыми решениями:

Функция вывода текста на всплывающее окно
Подскажите как можно реализовать функцию вывода текста на всплывающее окно при нажатие на кнопку Напечатать. Чтобы было примерно так: ...

Как показывать всплывающее окно до тех пор, пока не загрузится html полностью?
Данные с сервера подгружаются долго. Примерно 30-120 секунд. В это время в окне браузера понемногу добавляется html. Как сделать так,...

Как создать всплывающее окно для ввода числа, которое суммируется с итоговым результатом теста?
Никак не дойдёт, кому не сложно выручите пожалуйста var k = 27; // количество вопросов в БД var k0 = 10; // количество предъявляемых...

2
 Аватар для Antiplayer
129 / 112 / 39
Регистрация: 27.09.2012
Сообщений: 305
19.03.2019, 23:38
Цитата Сообщение от Jekyll-Hyde Посмотреть сообщение
var elem = document.getElementById("gmbB");
У вас селектор в css по классу прописан, а ищете по id:
HTML5
1
2
3
.gmbB{
    display:none;
}
Элемент вообще не имеет id:
Цитата Сообщение от Jekyll-Hyde Посмотреть сообщение
HTML5
1
<a class="gmbB" *href="" onclick="showNavSmall();">& #9776;</a>
Ну и вообще, если уже подключаете стили, так и пользуйтесь ими.
HTML5
1
2
3
4
5
6
7
.gmbB.show{
    display:block;
}
 
.gmbB {
    display:none;
}
А скриптом меняйте класс:

JavaScript
1
2
3
4
function toggleNavSmall(){
    var elem = document.getElementById("gmbB");
    elem.classList.toggle("show");
}
Это быстрее.
1
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
20.03.2019, 10:47
Добрый день.

Смешались в кучу кони, люди. Теперь надо отделить мух от котлет.
index.html
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="styles.css" rel="stylesheet">
    <link>
</head>
<body>
    <div class="dropdown">
        <div class="gmbB"></div>
        <div class="gmbBMenu">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>
styles.css
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
/* The container <div> - needed to position the dropdown content */
 
.dropdown {
    position: relative;
    display: inline-block;
}
 
.gmbB {
    background-color: #3498DB;
    color: white;
    padding: 4px 10px 4px 10px;
    font-size: 24px;
    display: inline-block;
    border: none;
    cursor: pointer;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
 
/* Dropdown button on hover & focus */
 
.gmbB:hover, .gmbB:focus {
    background-color: rgb(10, 12, 14);
}
 
/* Dropdown Content (Hidden by Default) */
 
.gmbBMenu {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
 
/* Links inside the dropdown */
 
.gmbBMenu a {
    color: #505050;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
 
/* Change color of dropdown links on hover */
 
.gmbBMenu a:hover {
    background-color: #dddddd;
    color: black;
}
 
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
 
.gmbBMenu.show {
    display: block;
}
index.js
JavaScript
1
2
3
4
5
6
document.querySelector(".gmbB").onclick = showNavSmall;
let menu = document.querySelector(".gmbBMenu");
 
function showNavSmall(){
    menu.classList.toggle("show");
}
Добавлено через 1 минуту
----
Стили честно в большинстве скопипастены с https://html5css.ru/howto/howto_js_dropdown.php
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
20.03.2019, 10:47
Помогаю со студенческими работами здесь

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

Всплывающее окно.
Здравствуйте. Подскажите, пожалуйста, как добиться данного эффекта: При клике на ссылку по середине открывается окно (Как в ВК:...

Всплывающее окно
Может кто-нибудь сделать всплывающее окошко на аяксе, после отправки формы обратной связи? Вот код: &lt;?PHP if (!empty($_POST)){ ...

Всплывающее окно
Добрый день, объясните пожалуйста как работает всплывающее окно со стороны работы сайта, вот сайт нам загрузил page.php там свои div блоки...

Всплывающее окно
Добрый день...много раз уже видимо темы обсуждались по созданию всплывающих окон на сайте, но все...помогите разобраться с одной...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
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
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru