情報パネルポップアップ

最終更新日: 2022-03-02
  • 作成対象:
  • Developer
    User

情報パネルポップアップは、Dynamic Media Classicで rollover_key プロパティが定義されている画像マップをユーザーがアクティブ化したとき、および情報パネル機能がビューアに対して適切に設定されている場合に、ビューア領域の中央に表示されます。

情報パネルの背景は、ビューア領域全体を覆い、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay

CSS プロパティ

説明

background-image

情報パネルの塗りの背景。

background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

関連トピック CSS スプライト .

例 — 半透明の黒の背景を使用するように情報パネルポップアップを設定します。

.s7ecatalogviewer .s7infopanelpopup .s7backoverlay {
 background-color : rgba(0,0,0,0.75);
}

情報パネルダイアログは、デフォルトでは、ビューア領域の中央に表示されます。 ただし、CSS クラスセレクターを使用して、サイズ、整列、背景、境界線を制御することはできます。

.s7ecatalogviewer .s7infopanelpopup .s7overlay

CSS プロパティ

説明

ビューア領域パネルの背景の塗り内での情報パネルダイアログの水平方向の位置。

トップ

ビューア領域内での情報パネルダイアログの垂直方向の位置。

width

ダイアログの幅。

height

ダイアログの高さ。

margin-left

情報パネルダイアログの左余白。中央揃えの目的で使用できます。

margin-top

情報パネルダイアログの上余白。中央揃えの目的で使用できます。

パディング

内部ダイアログのパディング。

background-color

ダイアログの背景色。

border-radius

ダイアログの境界線の半径。

box-shadow

ダイアログの影。

例 — 300 x 200 ピクセルの情報パネルダイアログボックスをビューア領域の中央に配置するには、次のように記述します。 上部に 40 ピクセルのパディング、その他すべての辺に 10 ピクセルのパディング、ライトグレーの背景、10 ピクセルの境界線の半径とドロップシャドウがあります。

.s7ecatalogviewer .s7infopanelpopup .s7overlay {
 left: 50%;
 top: 50%;
 margin-left: -150px;
 margin-top: -100px;
 width: 300px;
 height: 200px;
 padding-top: 40px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 background-color:rgb(221,221,221);
 border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.25);
}

情報パネルダイアログには閉じるボタンがあり、このボタンをクリックまたはタップするとダイアログが閉じます。

このボタンの外観は、以下の CSS クラスセレクターを使用して制御します。

.s7ecatalogviewer .s7infopanelpopup .s7closebutton

CSS プロパティ

説明

トップ

ダイアログの上の境界線からの位置。

ダイアログの右の境界線からの位置。

ダイアログの左の境界線からの位置。

ダイアログの下の境界線からの位置。

ボタンの幅。

高さ

ボタンの高さ。

background-image

ボタンの特定の状態に対して表示される画像。

background-position

CSS スプライトを使用する場合は、アートワークスプライト内に配置します。

関連トピック CSS スプライト .

メモ

このボタンは、 state 属性セレクター。ボタンの状態ごとに異なるスキンを適用するのに使用できます。

ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーション を参照してください。

例 — 28 x 28 ピクセルで、情報パネルダイアログの上および右端から 5 ピクセルの位置に配置される閉じるボタンを設定するには、次のように記述します。 最後に、は 4 つのボタンの状態ごとに異なる画像を表示します。

.s7ecatalogviewer .s7infopanelpopup .s7closebutton {
 width: 28px;
 height: 28px;
 top: 5px;
 right: 5px;
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="up"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="over"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_over.png);
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="down"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}
.s7ecatalogviewer .s7infopanelpopup .s7closebutton[state="disabled"] {
background-image:url(images/v2/InfoPanelPopup_CloseButton_dark_up.png);
}

このページ