4

作成した Web アプリでユーザーが [ヘルプ] ボタンをクリックしたときに、単一のページ オーバーレイを追加することを検討しています。以下は、私が達成したいことの例です

単一ページのオーバーレイ

JavaScript を使用してページに jquery mobile を実装しました。ページをオーバーレイする jquery モバイル ポップアップ パネルを調べましたが、目的を果たせませんでした。

これを行うには、どのリソース、ライブラリ、言語などを使用しますか? グーグルで検索しようとしましたが、無関係な結果が得られました。

4

1 に答える 1

4

私は試していませんが、背景をdivに配置して、固定位置(絶対位置)、固定幅/高さ(100%/ 100 %) と透明度。

ユーザーが「ヘルプ」ボタンをクリックすると、z-index が変更され、ページの先頭に配置されます。

更新
次のようなhtmlレイアウトを想定しています:

<html>
<head>...</head>
<body>
 <div id="container">
  <!-- some others divs with the content of the page and the help link -->
  <a href="#" id="help_button">HELP</a>
 </div>
 <div id="over_image"> <!-- add this -->
  <img src="path_to_the_overlapping_image" alt="overlap image" />
 </div>
</body>
</html>

このようなデフォルトCSS

div#container {
 z-index: 100;
}

div#over_image {
 z-index: -100; // by default the over image is "behind" the page
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%; // or puts the width/height of the "screen" in pixels
 height: 100%;
}

div#over_image img {
 width: 100%;
 height: 100%;
 opacity:0.4;
 filter:alpha(opacity=40); /* For IE8 and earlier */
}

そして最後にjQuery関数

$("a#help_button").on("click", function(event){
 event.preventDefault(); // it's not really a link
 $("div#over_image").css("z-index", "1000");
})

「非表示」機能も実装して、一部のアクションで重なっている画像を「リセット」する必要があります。おそらく次のようなものです。

$("div#over_image img").on("click", function(){
 // when the user click on the overlap image, it disappears
 $("div#over_image").css("z-index", "-100");
})

私はそれを試していません。おそらく、正しく動作させるために変更する必要がある小さなことがいくつかありますが、それは良い始まりです.

参考文献

于 2013-08-29T17:30:35.577 に答える