Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
49 / 39 / 5
Регистрация: 30.06.2010
Сообщений: 1,191
1

Pop-up окно

05.02.2013, 20:31. Показов 1567. Ответов 12
Метки нет (Все метки)

делаю попап окно. При клине на "затемнении" окошко закрывается(точнее скрывается). Но так же при нажатии в поле Поп-ап окна, он выполняет действие, которое должно выполняться при клике на "затемнении". Как исправить?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
05.02.2013, 20:31
Ответы с готовыми решениями:

При нажатии на кнопку открыть pop-up окно, в котором будет происходить ajax запрос
Ребят, помогите сделать) В общем имеется форма с полем "Email" и submit "Отправить". Мне нужно,...

Передача значений в POP-UP окно
Здравствуйте, мне нужно сделать pop-up окно, которое выводит информацию в зависимости от того на...

Как вывести pop up окно в центре?
День добрый! Подскажите, пожалуйста, как можно вывести pop up окно в центре с указанием ширины и...

Как сделать, чтобы, при закрытии родительского, pop-up окно тоже закрывалось?
открываю через <img scr='image.gif' onLoad='window.open()'>новое pop-up окно. как сделать, чтобы,...

12
странник
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
06.02.2013, 01:00 2
на код бы взглянуть. А вообще-то не помешало бы вот это почитать:
Как правильно задавать вопросы
0
49 / 39 / 5
Регистрация: 30.06.2010
Сообщений: 1,191
06.02.2013, 13:35  [ТС] 3
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 минут
Т.е. Помимо нажатия по нужному диву, он еще жмет и по диву за нужным
0
899 / 832 / 197
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
06.02.2013, 15:58 4
Чтобы кликать только по верхнему элементу нужно предотвратить, так называемый, 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(){
{
//внутренний код оставить
}
1
49 / 39 / 5
Регистрация: 30.06.2010
Сообщений: 1,191
06.02.2013, 19:06  [ТС] 5
Цитата Сообщение от Soldado Посмотреть сообщение
зачем вообще функции в которых внутри записан код события?
ну я пробoвал без функций, т.е. тoлько события кликов, так не работало.
а так я добавляю в $.ready() названия функций
Добавлено через 3 минуты
Цитата Сообщение от Soldado Посмотреть сообщение
Возможно я не вижу всего замысла, но зачем вообще функции в которых внутри записан код события?
что бы при повторном показе, показывалось главное окошко
Цитата Сообщение от Soldado Посмотреть сообщение
function pop_click_left_button(event)
{ event.stopPropagation();
что передается в event? событие?
0
странник
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
06.02.2013, 19:34 6
Цитата Сообщение от ProstoMad Посмотреть сообщение
что передается в event? событие?
это объект события. Более детально тут: www.cyberforum.ru/javascript/thread689616.html
1
899 / 832 / 197
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
06.02.2013, 19:38 7
Нужно вначале разобраться - чего Вы хотите, так как неясно, что за клин Вы хотите вбить в затемнение
При клине на "затемнении" окошко закрывается(точнее скрывается).
Предположим.
Вы кликаете по левому блоку - прячете родительский блок со всем содержимым (левый и правый блок), а потом пытаетесь показать правый блок, потому у вас и не работает.
Это всё равно, что зашторить окно, а потом за окном ещё что-то прятать или показывать. Это уже не имеет смысла, у нас само окно зашторено и всё равно, что происходит за окном, мы этого не увидим
Вот Ваш код:
Javascript
1
2
3
4
5
$("#pop_buttons_left").click(function()
    {
        $("#pop_buttons").css('display','none');// закрываем окно
        $("#pop_left").css('display', 'block');// за закрытым окном чего-то показываем
    });
Вот демонстрация
И Вы, возможно на её основе, толково объясните чего хотите.
0
49 / 39 / 5
Регистрация: 30.06.2010
Сообщений: 1,191
06.02.2013, 19:59  [ТС] 8
а зачем event писать в качестве аргумента? Ведь и без него работает...
и может кто подкинуть ссылку про events почитать, нашёл бы сам, но мб у кото то есть, где понятно объясняется

Добавлено через 2 минуты
Цитата Сообщение от Soldado Посмотреть сообщение
что за клин Вы хотите вбить в затемнение
так и должно работать. при следущем показе pop_bg будет показан и блок, который был "зашторен"

Добавлено через 1 минуту
Цитата Сообщение от ProstoMad Посмотреть сообщение
и может кто подкинуть ссылку про events почитать
Не увидел сразу..

Добавлено через 14 минут
что бы показанные(дочерние) окна не закрывались при клике на них надо писать событие клика к каждому дочернему окну?
0
899 / 832 / 197
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
06.02.2013, 20:14 9
Только заметил, что у Вас есть ещё и блоки #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');
    });
Вы не показали достаточно кода - потому и непонятки
Посмотрите так - демонстрация
Если нет
Ещё раз чего хотите с расстановкой!

Одной скупой строчки объяснений недостаточно.
0
49 / 39 / 5
Регистрация: 30.06.2010
Сообщений: 1,191
06.02.2013, 20:47  [ТС] 10
Так и написал, это работает. Только при нажатии на появившемся pop_left у меня жмется и на pop_bg. Вот и спрашиваю, получается придется писать событие клика по pop_left и в него писать event.stopPropogation()?
0
899 / 832 / 197
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
06.02.2013, 20:55 11
при нажатии на появившемся 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()
0
49 / 39 / 5
Регистрация: 30.06.2010
Сообщений: 1,191
06.02.2013, 21:37  [ТС] 12
Цитата Сообщение от Soldado Посмотреть сообщение
Да, пишите пустой клик для блоков pop_left с event.stopPropogation()
Есть альтернативные варианты?
0
899 / 832 / 197
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
06.02.2013, 23:31 13
Есть, но не скажу что лучше
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 минут
Есть более подробный пример, сделал себе в копилку - выкладываю здесь может ещё кому пригодится демо-страница
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
06.02.2013, 23:31

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

Pop-under окно
Как сделать, что бы окно программы было под окнами других приложений?

Pop-Up окно не отображается
Здравствуйте. Подскажите, пожалуйста, почему не появляется pop-up окно. В таскбаре видно, что оно...

Pop-up окно, после загрузки страницы
Всем привет, с js не знаком, нужно написать pop-up окно, которое будет показано новому...

как удалить pop-up окно c рабочего стола
Нужна помощь!После посещения порно сайта на рабочем столе вылезла непристойная картинка,никак не...


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

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

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