0

ページにモーダルウィンドウを実装しようとしています。アイデアは、プロジェクトのスクリーンショットとコードサンプルを含むポップアップウィンドウを表示することです。今のところ、スクリーンショット付きのポップアップウィンドウを実装しました。2つの問題があることを除いて、正常に動作しているようです。

1）マスクがウィンドウ全体を覆っていません。2）ポップアップウィンドウを閉じると、スクリーンショットをもう一度クリックしても更新されずに、マスクが表示されません。

ウェブページ

<div class="screenshot">
            <div class="case">
                <div class="thumb"> <a id="hooversMobile" href="#dialog" name="modal" title="Hoover's Mobile Site"><img src="images/proj_over_2.png" alt="Project thumbnail" style="top: 0px; "></a>
                </div><!-- end thumb-->
            </div><!-- end case-->
        </div>

.js

4

1 に答える 1

0

次のDIVには位置相対セットがあります。これは、任意の位置を意味します。その下の絶対要素は、その位置を基準にしています。

<div class="project" id="mobile"></div>

これが、オーバーレイがその位置からのみ伸びる原因です。

2番目のクリックの問題は、＃maskがフェードアウトされているが、コンテンツdivで行うようにfadeInが再度実行されていないことが原因です。

また、より良い応答を得るには、コードの一部を選択してJSfiddleにコピーする必要があります。次に、オーバーレイの配置について非常に具体的な質問をすることができます。

于 2012-10-16T18:52:58.027 に答える