Откройте скрытый div в лайтбоксе с помощью Mootools в Joomla 1.5 - PullRequest
Новая
       20

Откройте скрытый div в лайтбоксе с помощью Mootools в Joomla 1.5

1 голос
/ 09 февраля 2011

Я использую Joomla 1.5.22 с Mootools 1.1.У меня есть модуль с формой, содержащейся в скрытом элементе div, который я хочу открыть во встроенном модальном окне Joomla.У меня проблема в том, что когда я нажимаю на ссылку, форма открывается в модальном окне, но она также открывает div в модуле на странице.

HTML: 

<div id="moduleBox">
    <div id="clickMeButton"><a id="formClick" class="modal" href="#hiddenForm">Click me</a></div>
    <div id="hiddenForm">
     form code goes here
    </div>
</div>

Javascript: 

window.addEvent('domready', function() {
  $('formClick').addEvent('click', function(){
    $('hiddenForm').setStyle('display','block');
  });
});

Итак, как мне заставить форму отображаться только в модальном поле?

Вы можете увидеть, о чем я говорю здесь - http://www.internextion.com/

Это модуль обратного вызова.Я уже добавил обработчик: «принять», как предложено ниже, теперь результат немного другой.Целевой div все еще отображается под ссылкой, но теперь модальное окно содержит ссылку, а не цель.

Ответы [ 3 ]

0 голосов
/ 12 февраля 2011

Вариант 1:

Если вы посмотрите html-код (в firebug) для наложенного div, вы увидите, что он создает «копию» html и помещает внутри оверлейного контейнера id="sbox-content".Теоретически, если вы добавите CSS, как показано ниже +/-, он скроет ссылку и отобразит все остальное.Это может быть самое простое и простое решение. 

div#sbox-content > a#formClick{
   display: none;
}

Вариант 2:

Если вариант 1 по какой-то причине не работает, вы можете попробовать поиграть с CSS и скрыть ссылку, когда модальныйокно открывается и затем становится видимым при его закрытии.

Измените JS, добавив класс вместо изменения стиля. 

window.addEvent('domready', function() {
  $('formClick').addEvent('click', function(){
    $('formClick').addClass('hidden');
    $('hiddenForm').setStyle('display','block'); 
  });
});

Загрузите дополнительный CSS, который сделает ссылку невидимой 

div#clickMeButton.hidden {
    display: none;
}

Тогда вам придется перегрузить событие закрытия и сделать ссылку видимой ...

0 голосов
/ 13 февраля 2011

Хорошо, так что я, наконец, заставил его работать с комбинацией других данных ответов. Сначала я удалил событие нажатия javascript, чтобы появилась форма, что решило проблему с отображением формы под ссылкой. Затем я добавил новый CSS для скрытого идентификатора в модальном окне и установил для него отображение: блок. Похоже, что поведение обработчика по умолчанию (по крайней мере в Joomla) заключается в принятии контента, так как я удалил handler: 'adopt', и он все еще принимает контент.

Я знал, что это что-то простое, спасибо за помощь!

Кстати - ссылка еще жива, вы можете увидеть правильное поведение на демонстрационном сайте. Теперь все, что мне нужно сделать, - это добавить некоторую причудливую отправку формы AJAX, и она будет готова в прайм-тайм.

0 голосов
/ 12 февраля 2011

Я думаю, что это использует SqueezeBox Харальда - в этом случае вы смотрите на следующие сценарии:

  • найдите целевой div и кликните его, чтобы вставить в модальное поле.* найдите целевой div и примите его в модальное поле.

вы видите первый (по умолчанию) случай.чтобы достичь второго эффекта, добавьте:

handler: 'adopt'

в опции создания экземпляров.больше здесь: http://digitarald.de/project/squeezebox/1-1/showcase/get-elements/

...