0

注：これは、元の質問から解決策を付けて編集されています。元の質問は長すぎて、その考え方に多くの誤りがありました。これについてはお詫び申し上げます。

simplemodal divクラス.basic-modal-contentへの呼び出しの各インスタンスが、チェーンの最後にあるモーダルウィンドウに追加の次または前のボタンを追加したときに問題が発生しました。モーダルコンテンツの2つの別々の領域があり、それらはモーダルウィンドウで結合されました。

これは、.basic-modal-content-fooと.basic-modal-content-barの2つのdivクラスを持ち、ページの下にスクリプトの2つのインスタンスを置くことで解決されました。必要なのはCSSだけです...

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

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

これがスクリプトの「foo」バージョンです。バーバージョンのdivクラスの4つのインスタンスを変更します。

<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>

ul/liリストにプログレスバーを表示する各ウィンドウの画像を作成するためのCSS。

上記を生成するコードは次のようになります。

    <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構造は、リンクのメインページで機能します。モーダルウィンドウを使用すると、6つのテキストすべてを参照できます。ウィンドウに共通のCSSスタイルがあり、各モーダルウィンドウには、プログレスバーの形式の「#modal_[number]img」CSSから派生したカスタムイメージがあります。

これは、3つの伝記リンクの1つからの関連コードです。この現在の構成では、バイオグラフィックリンクのそれぞれに3つすべてが含まれている必要があることに注意してください。

<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>

同様に、「伝記」はページの別の領域から開きます。モーダルウィンドウを使用すると、3つのBIOすべてを参照できます。BIOSは、同じCSSスタイルウィンドウと、ポートレート形式の「#modal_[number]img」CSSから派生した各モーダルウィンドウのカスタムイメージを使用します。

すべてがうまく機能しています。

残っている質問が1つあります。ページにJSのインスタンスが2つあります。これを1つのスクリプトに組み合わせることができますか？

前もって感謝します。

DDF

4

1 に答える 1

0

残りの 1 つの質問: ページに JS の 2 つのインスタンスがあります。これを 1 つのスクリプトにまとめることができますか?

理由がわかりません。試してみましたか？

于 2010-03-24T17:51:59.810 に答える