2

そこで、bigcartel サイトに追加した「サイズ ガイド」ウィンドウ用に「Reveal」というモーダル ウィンドウ jQuery プラグインを実装しました(まだ完了していないので、何も購入しないでください。ボタンはテスト目的で開いています)。 ) 上にスクロールして、[サイズ ガイド] ボタンをクリックすると、モーダル ウィンドウがポップアップし、ヘッダーの後ろに隠れます。

下にスクロールして「サイズガイド」ボタンをクリックすると、モーダルウィンドウも「あなたも好きかもしれません...」セクションの後ろに隠れます。つまり、モーダル ウィンドウは「灰色の背景」領域にしか表示されません。

z-index プロパティを試しましたが、何も機能しません。

モーダル ウィンドウだけのモーダル ウィンドウ CSS は次のようになります。

.reveal-modal {
    visibility: hidden;
    top: -200px; 
    left: 50%;
    margin-left: -320px;
    width: 585px;
    background: #fff url(modal-gloss.png) no-repeat -200px -80px;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4);
    }

Reveal モーダル ウィンドウを取得した場所は次のとおりです: http://zurb.com/playground/reveal-modal-plugin

これを要約すると、私の全体的な質問は、灰色の背景領域だけでなく、ヘッダーと「あなたも好きかもしれません...」セクションにモーダルボックスをポップアップさせるにはどうすればよいですか? それらは現在、ヘッダーの後ろに隠れており、（十分に下にスクロールして「サイズガイド」ボタンをクリックすると）「あなたも好きかもしれません...」セクション。

4

2 に答える 2