Zendesk Web Widget(Classic)には、多くの設定とカスタマイズオプションが用意されています。場合によっては、Web Widget(Classic)のスタック順序を、Webページ上の他のコンテンツとの関連で指定する必要があります。これを行うには、 z-index
Web Widget(Classic)設定の値。この記事では、 z-index
Webサイト上の他の要素とウィジェットの配置を変更します。

とは z-index
?
説明と定義 z-index
Z-index
は、重なり合うコンテンツの表示と位置を設定するために使用されるCSSプロパティです。2つの要素が重なる場合、 z-index
は、他の要素の上に表示される要素を決定します。の z-index
valueには、整数、またはinherit、initial、unsetなどのグローバル値を割り当てることができます。
整数を使用する場合、要素の z-index
最も高いインデックスに割り当てられた要素は、他の要素の前に表示されます。たとえば、コンテナAに z-index
コンテナBに割り当てられた z-index
の場合、コンテナAはコンテナBの前に配置されます。グローバル値を使用する場合、要素は親の値に対して割り当てられた位置をとります。。
どのように z-index
Web Widget(Classic)に関連していますか?
設定 z-index
ウィジェットを作成する
Web Widget(Classic)の前にコンテンツを表示したい場合や、Web Widget(Classic)を完全に他のコンテンツの背後に隠したい場合があります。ここで、 z-index
Web Widget(Classic)の。
設定方法 z-index
Web Widget(Classic)の場合
2つの設定オプション z-index
設定できるのは z-index
Web Widgetの場合、
- を使用
window.zESettings
オブジェクトです。これにより、z-index
ウィジェットが最初に読み込まれたとき。の使用について詳しくは、window.zESettings
オブジェクトについては、 こちらの開発者ドキュメントを参照してください。 - updateSettings APIを使用します。これにより、
z-index
実行時に更新されます。updateSettings APIの使用について詳しくは、開発者向けドキュメントを 参照してください。
z-index
デフォルトのインデックスを999998に設定すると、別のオブジェクトのウィジェットがない限り、ウィジェットは画面の前面に表示されます。 z-index
がその数を超えています。window.zESettingsオブジェクトの使用例
の window.zESettings
オブジェクトを使用して z-index
ページ読み込み時
この例では、 z-index
を使用して window.zESettings
オブジェクトです。なお、 window.zESettings
オブジェクトはウィジェットの起動時にのみ読み込まれます。を更新するには z-index
値を実行時に更新する方法については、後述の例を参照してください。
以下は、変更を加える前のページの外観です。 z-index
Web Widget(Classic)の値。予想どおり、Web Widget(Classic)は他のコンテンツの上に表示されます。
上記の例では、 z-index
のコンテナ要素が明示的に設定されていません。つまり、 z-index
コンテナ要素の「」はデフォルトで「自動」に設定され、0に対応します。Web Widget(クラシック)を非表示にするには、 z-index
以下に示すように、値が0より小さい場合:
これで、ページが読み込まれると、Web Widget(Classic)がコンテナ要素の背後に表示されます。これは、 z-index
コンテナ要素の値が z-index
Web Widget(Classic)の値。
新しい z-index
値を指定すると、Web Widget(クラシック)がWebページの他の要素の背後に表示されます。
updateSettings APIを使用した例
updateSettings APIは、リアルタイムで変更を行うための柔軟性を提供します
これらの例では、モーダルに z-index
の2。変更するのは z-index
ウィジェットを非表示にするか、画面の前面に表示します。
例1:Web Widget(Classic)をモーダルの背後に隠す
最初の例では、Web Widget(Classic)をモーダルの背後に隠すために、ウィジェットの z-index
1に変更します。
実際の動作を見る:
例2:Web Widget(Classic)をモーダルの最前面に表示する
この例では、Web Widget(Classic)をモーダルの前に表示して、ページ上で引き続きアクセスできるようにします。もう一度、zE webWidgetを使用してupdateSettingsを設定し、 z-index
を3に変更します。これにより、Web Widget(Classic)の位置が効果的に移動します。
実際の動作を見る:
概要とその他のリソース
詳細については、以下のリンクを参照してください。
Web開発者は、最適な方法を選択して z-index
Web Widget(Classic)の値。の window.zESettings
オブジェクトを使用して z-index
一方、updateSettings APIでは、リアルタイムで柔軟に変更を行うことができます。ウィジェットのカスタマイズの詳細については、以下を参照してください。
Web Widget(Classic)の高度なカスタマイズ
開発者コミュニティ
翻訳に関する免責事項:この記事は、お客様の利便性のために自動翻訳ソフトウェアによって翻訳されたものです。Zendeskでは、翻訳の正確さを期すために相応の努力を払っておりますが、翻訳の正確性については保証いたしません。
翻訳された記事の内容の正確性に関して疑問が生じた場合は、正式版である英語の記事を参照してください。
0 コメント
サインインしてコメントを残してください。