Аватар для cevil
12 / 12 / 5
Регистрация: 07.04.2014
Сообщений: 174

Разное содержание popup

13.05.2014, 03:07. Показов 1386. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем привет!
Имею простой popup. Содержимое этого popupА на каждой кнопке должно быть разным, но срабатывает только для кнопки идущей первой, получается запишется в массив значение, а для других кнопок не обнуляется и не обновляется! как исправить эту проблему? подскажите пожалуйста. Заранее всех благодарю!
JavaScript
1
2
3
4
5
<script type="text/javascript">
            $(document).ready(function(){
            PopUp($('#obj'), $('#trigg'));
                });
    </script>
obj- это содержимое всплывающего окна
trigg- ссылка при клике на которую всплывает, то что должно всплывать.
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
27
28
29
30
31
32
33
function PopUp(obj,trig){
    var html = obj.html();
    obj.remove();
    var body = $('body')[0];
                
    var HTML="<div id='popup'><span id='cancel'></span>"+html+"</div>";
    var win = $('<div id="win">'+HTML+'</div>');
    win.appendTo(body);
    
    function showWin(){
        $('#win').css({display: 'block'});
        $('#popup').css({
            display:'block', 
            opacity:0, 
            top: $(window).height()/2-$('#popup').height()/2+'px', 
            left: $(window).width()/2-$('#popup').width()/2+'px'
        });
        $('#popup').css('opacity', 1);          
    }
        
    if($(trig)){
        $(trig).click(function(){
            showWin();
        });
    }
        
    if($('#cancel')){
        $('#cancel').click(function(){
            $('#win').css('display', 'none');
        });
    }
    
}
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
13.05.2014, 03:07
Ответы с готовыми решениями:

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

Разное содержание для бота и юзера - клоакинг?
Возник такой вопрос у ряда вебмасеров, в том числе у меня, по поводу клоакинга. На форуме использовался тег &lt;noindex&gt; для...

Расположение PopUp относительно другого PopUp
Доброго времени суток. Возникла небольшая проблема - есть popup, необходимо отобразить еще один popup относительно предыдущего. Т.е. : ...

10
284 / 283 / 73
Регистрация: 06.05.2013
Сообщений: 1,613
13.05.2014, 08:58
как минимум $('#trigg')
у Вас несколько элементов с id=trigg?
0
 Аватар для cevil
12 / 12 / 5
Регистрация: 07.04.2014
Сообщений: 174
13.05.2014, 12:46  [ТС]
да элементов с id=trigg у меня 12 штук
HTML5
1
2
<a id="trigg" href="javascript:void(0);"><img src="img/color_2.jpg"  alt="Кофе" />Кофе</a> 
                     <div id="obj" ><div class="sample"><img src="img/1234.jpg"> </div></div>
при нажатии на а всплывть окно должно с фото на тему кофе, следующая на тему чай ну т.д
0
284 / 283 / 73
Регистрация: 06.05.2013
Сообщений: 1,613
13.05.2014, 13:32
Сделайте не id="trigg" а class="trigg" для начала, id - он должен быть уникальным в пределах одной страницы.

с obj то же самое.

Потом уже можно будет скрипт менять
0
 Аватар для cevil
12 / 12 / 5
Регистрация: 07.04.2014
Сообщений: 174
13.05.2014, 13:55  [ТС]
Спасибо за ответ. это я исправила. Именно с JS у меня и напряг. Только взялась за его изучение.
подскажите как правильно синтаксис id на class сменить, ну или где почитать об этом
0
284 / 283 / 73
Регистрация: 06.05.2013
Сообщений: 1,613
13.05.2014, 14:18
Попробуйте просто изменить

JavaScript
1
2
3
          $(document).ready(function(){
            PopUp($('#obj'), $('#trigg'));
                });
на

JavaScript
1
2
3
          $(document).ready(function(){
            PopUp($('.obj'), $('.trigg'));
                });
0
 Аватар для cevil
12 / 12 / 5
Регистрация: 07.04.2014
Сообщений: 174
13.05.2014, 14:34  [ТС]
это помогло частично. Содержание модального окна у всех ссылок одинаковое.(везде картинка стоит первой ссылки) Получается что класс obj не перезаписывается а остается const
0
284 / 283 / 73
Регистрация: 06.05.2013
Сообщений: 1,613
13.05.2014, 14:36
JavaScript
1
2
3
function PopUp(trig){
    var obj = trig.next().html();
    obj.remove();
JavaScript
1
2
3
4
5
<script type="text/javascript">
            $(document).ready(function(){
            PopUp($('.trigg'));
                });
    </script>
как вариант)
0
 Аватар для cevil
12 / 12 / 5
Регистрация: 07.04.2014
Сообщений: 174
13.05.2014, 14:49  [ТС]
Модальные окна перестали быть скрытыми и встали на передний план друг за другом.
0
284 / 283 / 73
Регистрация: 06.05.2013
Сообщений: 1,613
13.05.2014, 14:52
Цитата Сообщение от cevil Посмотреть сообщение
Модальные окна перестали быть скрытыми и встали на передний план друг за другом.
Скорее всего стили какие то были применены к #obj и #trigg, посмотрите и перенесите на .obj и .trigg, соответственно.
0
 Аватар для cevil
12 / 12 / 5
Регистрация: 07.04.2014
Сообщений: 174
14.05.2014, 13:17  [ТС]
Мда... точно! чет я не сообразила сразу

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

Спасибо большое за помощь!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
14.05.2014, 13:17
Помогаю со студенческими работами здесь

Blockread и Blockwrite. Добавить к 1-му файлу содержание второго, а ко второму файлу - содержание первого
даны 2 файла одного и того же типа. с помощью процедурывить Blockread и Blockwrite добавить содержимое к 1 файла на содержимое, а ко 2...

Разное
1)Как запустить другое приложение из своего (с параметрами)? ////////////////////TMemo 2) Процедурный скроллинг TMemo как...

popup
Есть скрипт popup окна на jquery есть 2 два одинаковых popup, один в начале страницы, другой в конце и есть совсем другой попап как...

Паскаль Разное
помогите составить программы к следующим задачам: 1. Пусть даны натуральные числа k,n,вещественные числа A1,A2,...,akn.Получите (см. фаил...

Разное отображение
Народ такой у меня трабл.Через админку шаблон Joomla в Hrome отображается нормально,а через Opera смотрю(так же через админку), весь текст...


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

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

Новые блоги и статьи
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(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru