Simplemodal: четыре раза на странице приводит к дополнительной кнопке «далее» или «назад» - PullRequest
Новая
       12

Simplemodal: четыре раза на странице приводит к дополнительной кнопке «далее» или «назад»

0 голосов
/ 20 марта 2010

ПРИМЕЧАНИЕ: это было отредактировано из исходного вопроса с решением. Первоначальный вопрос был слишком длинным и в его мышлении было много ошибок. За это прошу прощения.

Мы столкнулись с проблемой, когда каждый экземпляр вызова simplemodal div-класса .basic-modal-content добавлял дополнительные next или предыдущая кнопка в модальных окнах в конце цепочки. У нас было две отдельные области модального контента, и они были объединены в модальном окне.

Это было решено наличием двух классов div: .basic-modal-content-foo и .basic-modal-content-bar и наличием двух экземпляров приведенного ниже сценария на странице. Все, что требуется, это немного CSS ... 

.basic-modal-content-foo {
    display: none;
}

.basic-modal-content-bar {
    display: none;
}

Вот версия скрипта "foo". Измените 4 экземпляра класса div для версии бара. 

<script>
$(function()
{
    $('a.foo').each(function()
    {
            $(this).click(function()
            {
                    $('#modal_' + this.id).modal({
                    overlayClose:true
                    });
            });
    });

    var num_divs = $('div.basic-modal-content-foo').length;

    $('div.basic-modal-content-foo').each(function(i)
    {
            /* if there is a previous div add a link to it
             */
            if (i > 0)
            {
                    /* get the ID for previous div
                     */
                    var prev_id = $(this).prev('.basic-modal-content-foo').attr('id');

                    /* add the link with click event
                     */

$('<a href="#" class="simplemodal-container-prev"></a>')
                            .click(function()
                            {
                                    $.modal.close();
                                    $('#' + prev_id).modal({overlayClose:true});
                            })
                            .appendTo($(this));
            }

            /* if there is a next div add a link to it
             */
            if (i < num_divs - 1)
            {
                    /* get the ID for next div
                     */
                    var next_id = $(this).next('.basic-modal-content-foo').attr('id');

                    /* add the link with click event
                     */
                    $('<a href="#" class="simplemodal-container-next"></a>')
                            .click(function()
                            {
                                    $.modal.close();
                                    $('#' + next_id).modal({overlayClose:true});
                            })
                            .appendTo($(this));
            }
    });

});

</script>

и немного CSS для создания изображения для каждого окна, в котором отображается индикатор выполнения в списке ul / li.

Код для получения вышеупомянутого выглядит следующим образом: 

    <h1>Our HEADLINE</h1>
<div id="basic-modal">
<ul>
<li><a href="#" id="one">TEXT 1</a></li>
<li><a href="#" id="two">TEXT 2</a></li>
<li><a href="#" id="three">TEXT 3</a></li>
<li><a href="#" id="four">TEXT 4</a></li>
<li><a href="#" id="five">TEXT 5</a></li>
<li><a href="#" id="six">TEXT 6</a></li>
</ul>
</div>

<div class="basic-modal-content-foo" id="modal_one">
<img src="link to modal_one.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>

<div class="basic-modal-content-foo" id="modal_two">
<img src="link to modal_two.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>

<div> ... other divs 3 4 and 5 </div>

<div class="basic-modal-content-foo" id="modal_six">
<img src="link to modal_six.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>

И добавление в класс div дополнительного текста для модального столбца. 

<div class="basic-modal-content-bar" id="modal_seven">
<img src="link to modal_seven.png" alt="portrait 1"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>

<div class="basic-modal-content-bar" id="modal_eight">
<img src="link to modal_eight.png" alt="portrait 2"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>

<div class="basic-modal-content-bar" id="modal_nine">
<img src="link to modal_nine.png" alt="portrait 3"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>
</div>

Структура ul / li работает на главной странице для ссылок. Модальные окна позволяют просматривать все шесть текстов. Существует общий стиль CSS для окон и настраиваемое изображение в каждом из модальных окон, полученное из CSS "#modal_ [number] img" в виде индикатора выполнения .

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

<h4>Our HEADLINE</h4>
<div id="basic-modal">
<div class="bottom-widget-text">
<img src="picture" alt="not relevant to the simplemodal problem"/>
<p>Read about person NUMBER 1 by clicking on the following link:
<a href="#" class="bar" id="seven" >Expand</a>
</p>
</div>
</div>

Точно так же «биографии» открываются из другой области страницы. Модальные окна позволяют просматривать все три БИО. В BIOS используются ОДИН ИЗ ИМЕННЫХ CSS-стилей и пользовательское изображение в каждом из модальных окон, полученное из CSS "#modal_ [number] img" в виде портрета .

Все работает хорошо.

Остался один вопрос: у меня есть два экземпляра JS на странице. Можно ли это объединить в один скрипт?

Заранее спасибо.

* * DDF тысячи сорок-девять

1 Ответ

0 голосов
/ 24 марта 2010

Остался один вопрос: у меня есть два экземпляра JS на странице. Можно ли это объединить в один сценарий?

Не понимаю, почему нет. Вы пробовали это?

...