Pop-up окно

@ProstoMad · Регистрация: 30.06.2010

Студворк — интернет-сервис помощи студентам

делаю попап окно. При клине на "затемнении" окошко закрывается(точнее скрывается). Но так же при нажатии в поле Поп-ап окна, он выполняет действие, которое должно выполняться при клике на "затемнении". Как исправить?

Donald28 · 06.02.2013, 01:00

на код бы взглянуть. А вообще-то не помешало бы вот это почитать:
Как правильно задавать вопросы

@ProstoMad · 06.02.2013, 13:35 **[ТС]**

HTML5
1
2
3
4
5
6
<div id="pop_bg">
 
    <div id="pop_buttons">
        <div id="pop_buttons_left"></div><div id="pop_buttons_right"></div>
    </div>
</div>

JavaScript
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
function pop_click_left_button()
{
    $("#pop_buttons_left").click(function()
    {
        $("#pop_buttons").css('display','none');
        $("#pop_left").css('display', 'block');
    });
}
function pop_click_right_button()
{
    $("#pop_buttons_right").click(function()
    {
        $("#pop_buttons").css('display','none');
        $("#pop_right").css('display', 'block');
    });
}
function pop_click_bg()
{
    $("#pop_bg").click(function()
    {
        $("#pop_bg").css('display','none');
        $("#pop_buttons").css('display','block');
        $("#pop_left").css('display', 'none');
        $("#pop_right").css('display', 'none');
    });
}

Добавлено через 7 часов 20 минут
Т.е. Помимо нажатия по нужному диву, он еще жмет и по диву за нужным

@Soldado · 06.02.2013, 15:58

Чтобы кликать только по верхнему элементу нужно предотвратить, так называемый, bibbling-еффект - это когда клик по верхнему элементу одновременно является кликом и по всем расположенным под ним элементам (т.е. родительским)
stopPropagation() - предотвращает bibbling-еффект
Нужно добавить такое:

JavaScript
1
2
function pop_click_left_button(event)
{ event.stopPropagation();

ну и т.д.

Добавлено через 12 минут
А показывать и прятать можно короче - перечислив идентификаторы через запятую.
И ещё, указав

JavaScript
1
2
$("#pop_bg").css('display','none');
$("#pop_buttons").css('display','block');

Вы в первой строке прячете родительский блок, а значит всё его содержимое, потом якобы показываете дочерний блок у него и так свойство 'display','block'
Возможно я не вижу всего замысла, но зачем вообще функции в которых внутри записан код события? Просто всё без функций:
Нужно удалить то, что здесь записано

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function pop_click_left_button(){
//внутренний код оставить
}
function pop_click_right_button()
{
//внутренний код оставить
}
function pop_click_bg(){
{
//внутренний код оставить
}

@ProstoMad · 06.02.2013, 19:06 **[ТС]**

Сообщение от Soldado

зачем вообще функции в которых внутри записан код события?

ну я пробoвал без функций, т.е. тoлько события кликов, так не работало.
а так я добавляю в $.ready() названия функций
Добавлено через 3 минуты

Сообщение от Soldado

Возможно я не вижу всего замысла, но зачем вообще функции в которых внутри записан код события?

что бы при повторном показе, показывалось главное окошко

Сообщение от Soldado

function pop_click_left_button(event)
{ event.stopPropagation();

что передается в event? событие?

Donald28 · 06.02.2013, 19:34

Сообщение от ProstoMad

что передается в event? событие?

это объект события. Более детально тут: www.cyberforum.ru/javascript/thread689616.html

@Soldado · 06.02.2013, 19:38

Нужно вначале разобраться - чего Вы хотите, так как неясно, что за клин Вы хотите вбить в затемнение

При клине на "затемнении" окошко закрывается(точнее скрывается).

Предположим.
Вы кликаете по левому блоку - прячете родительский блок со всем содержимым (левый и правый блок), а потом пытаетесь показать правый блок, потому у вас и не работает.
Это всё равно, что зашторить окно, а потом за окном ещё что-то прятать или показывать. Это уже не имеет смысла, у нас само окно зашторено и всё равно, что происходит за окном, мы этого не увидим
Вот Ваш код:

JavaScript
1
2
3
4
5
$("#pop_buttons_left").click(function()
    {
        $("#pop_buttons").css('display','none');// закрываем окно
        $("#pop_left").css('display', 'block');// за закрытым окном чего-то показываем
    });

Вот демонстрация
И Вы, возможно на её основе, толково объясните чего хотите.

@ProstoMad · 06.02.2013, 19:59 **[ТС]**

а зачем event писать в качестве аргумента? Ведь и без него работает...
и может кто подкинуть ссылку про events почитать, нашёл бы сам, но мб у кото то есть, где понятно объясняется

Добавлено через 2 минуты

Сообщение от Soldado

что за клин Вы хотите вбить в затемнение

так и должно работать. при следущем показе pop_bg будет показан и блок, который был "зашторен"

Добавлено через 1 минуту

Сообщение от ProstoMad

и может кто подкинуть ссылку про events почитать

Не увидел сразу..

Добавлено через 14 минут
что бы показанные(дочерние) окна не закрывались при клике на них надо писать событие клика к каждому дочернему окну?

@Soldado · 06.02.2013, 20:14

Только заметил, что у Вас есть ещё и блоки #pop_left и #pop_right (запутался из-за обилия pop)
В html коде Вы их не показали , тогда может так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$("#pop_buttons_left").click(function(event)
    {event.stopPropagation();
        $("#pop_buttons").css('display','none');
        $("#pop_left").css('display', 'block');
    });
 
 $("#pop_buttons_right").click(function(event)
    {event.stopPropagation();
        $("#pop_buttons").css('display','none');
        $("#pop_right").css('display', 'block');
    });

Вы не показали достаточно кода - потому и непонятки
Посмотрите так - демонстрация
Если нет
Ещё раз чего хотите с расстановкой!

Одной скупой строчки объяснений недостаточно.

@ProstoMad · 06.02.2013, 20:47 **[ТС]**

Так и написал, это работает. Только при нажатии на появившемся pop_left у меня жмется и на pop_bg. Вот и спрашиваю, получается придется писать событие клика по pop_left и в него писать event.stopPropogation()?

@Soldado · 06.02.2013, 20:55

при нажатии на появившемся pop_left у меня жмется и на pop_bg

Т.е. получается, что pop_left у Вас находится внутри pop_bg и клик по нём вызывает срабатывание события для нижнего pop_bg блока, но в выложенном коде ничего этого нет

HTML5
1
2
3
4
5
6
<div id="pop_bg">
 
    <div id="pop_buttons">
        <div id="pop_buttons_left"></div><div id="pop_buttons_right"></div>
    </div>
</div>

Да, пишите пустой клик для блоков pop_left с event.stopPropogation()

@ProstoMad · 06.02.2013, 21:37 **[ТС]**

Сообщение от Soldado

Да, пишите пустой клик для блоков pop_left с event.stopPropogation()

Есть альтернативные варианты?

@Soldado · 06.02.2013, 23:31

Есть, но не скажу что лучше

JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" >
$(document).ready(function(){
$('#pop_bg').click(function(e){
    if (e.target.id=="pop_buttons_left" || e.target.id=="pop_buttons_right") {
        return true;
    }
alert("код сработал");// здесь код обработчика 
}); 
});/*end ready*/
</script>

Демо-страница

Добавлено через 19 минут
Есть более подробный пример, сделал себе в копилку - выкладываю здесь может ещё кому пригодится демо-страница

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@ProstoMad 50 / 40 / 5 Регистрация: 30.06.2010 Сообщений: 1,191

	Pop-up окно 05.02.2013, 20:31. Показов 1835. Ответов 12 Метки нет (Все метки) делаю попап окно. При клине на "затемнении" окошко закрывается(точнее скрывается). Но так же при нажатии в поле Поп-ап окна, он выполняет действие, которое должно выполняться при клике на "затемнении". Как исправить? 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	06.02.2013, 01:00
	на код бы взглянуть. А вообще-то не помешало бы вот это почитать: Как правильно задавать вопросы 0

@ProstoMad 50 / 40 / 5 Регистрация: 30.06.2010 Сообщений: 1,191
	06.02.2013, 20:47 [ТС]
	Так и написал, это работает. Только при нажатии на появившемся pop_left у меня жмется и на pop_bg. Вот и спрашиваю, получается придется писать событие клика по pop_left и в него писать event.stopPropogation()? 0