手順の概要

Zendesk Web Widget（従来版）には、多数の設定とカスタマイズオプションが用意されています。Webページ上の他のコンテンツに対して、Web Widget（従来版）の重なり順序を指定する必要がある場合があります。これを行うには、Web Widget（従来版）の設定でz-index値を設定します。

この記事では、ウィジェットをWebサイト上の他の要素とどのように配置するかをz-index変更する基本的な例について説明します。

免責事項：この記事は説明のみを目的として提供されています。記事内で例示したコードについて、Zendeskはサポートも保証もいたしません。何か問題があった場合はコメント欄に投稿するか、インターネットで解決策を探してみてください。

z-indexの概要

Z-indexは、重複するコンテンツの表示と位置を設定するために使用されるCSSプロパティです。2 つの要素が重なると、z-indexによって、どちらの要素が他の要素の上に表示されるかが決定されます。z-index値は、整数値または inherit、initial、unset などのグローバル値で割り当てることができます。

整数を使用する場合、最も高いインデックスに割り当てられた要素のz-indexが、他の要素の前に表示されます。たとえば、コンテナAにz-index2、コンテナBにz-index1が割り当てられている場合、コンテナAはコンテナBの前に配置されます。グローバル値を使用する場合、要素は親の値に関連して割り当てられた位置を取ります。

z-indexとWeb Widget（従来版）の関係を教えてください。

Web Widget（従来版）をz-indexすると、コンテンツをWeb Widget（従来版）の前に表示したり、Web Widget（従来版）を他のコンテンツの背後に完全に非表示にしたりできます。

Web Widget（従来版）のz-indexを設定するにはどうすればよいですか？

ウィジェットのz-indexは、次の2つの方法で設定できます。

  1. window.zESettingsオブジェクトを使用します。これにより、ウィジェットが最初に読み込まれるときのz-indexが設定されます。window.zESettingsオブジェクトの使用の詳細については、開発者向けドキュメントを参照してください。設定リファレンス。
  2. updateSettings APIを使用します。これにより、実行時にz-indexを更新できます。updateSettings APIの使用について詳しくは、次の開発者向けドキュメントを参照してください。Core API。
メモ：Web Widget（従来版）のz-index設定のデフォルトは、インデックス999998です。これは、別のオブジェクトのz-indexがこの数を超えない限り、ウィジェットが画面の前面に表示されることを意味します。

window.zESettingsオブジェクトの使用例

window.zESettingsオブジェクトを使用して、ページの読み込み時のz-indexを設定できます。

この例では、window.zESettingsオブジェクトを使用してz-indexを設定します。window.zESettingsオブジェクトは、ウィジェットの起動時にのみ読み込まれます。実行時にupdateSettings APIを使用してz-index値を更新するには、以降の例を参照してください。

ここでは、Web Widget（従来版）のz-index値を変更する前のページについて説明します。予想どおり、Web Widget（従来版）は他のコンテンツの上に表示されます。
mceclip0.png

上記の例では、コンテナ要素のz-indexは明示的に設定されていません。つまり、コンテナ要素のz-indexはデフォルトで0に対応するautoになります。Web Widget（従来版）を非表示にするには、以下に示すように、z-index値を0より小さく設定します。

mceclip1.png

これで、ページが読み込まれると、Web Widget（従来版）がコンテナ要素の背後に表示されます。これは、コンテナ要素のz-index値がWeb Widget（従来版）のz-index値より高いためです。

mceclip2.png

新しいz-index値により、Web Widget（従来版）はWebページの他の要素よりも後方に表示されます。

updateSettings APIの使用例

updateSettings APIにより、変更をリアルタイムで柔軟に行うことができます。

これらの例では、モーダルにz-index2が与えられています。ウィジェットのz-indexは、非表示にするか、画面の前面に表示するかのどちらかに変更します。Example_Image_1.png

例1：Web Widget（従来版）をモーダルの背後に非表示にする

最初の例では、Web Widget（従来版）をモーダルの背後に非表示にするには、以下に示すようにウィジェットのz-indexを1に設定します。

Example_Image_2.png

実例を見る：

Example_Image__GIF__3.gif

例2：Web Widget（従来版）をモーダルの先頭に表示する

この例では、Web Widget（従来版）をモーダルの前に表示し、ページ上で引き続きアクセスできるようにする方法を示します。この例では、再びzE webWidgetを使用してupdateSettingsし、z-indexを3に設定します。これにより、Web Widget（従来版）の位置が効果的に移動します。

Example_Image_4.png

実例を見る：

Example_Image__GIF__5.gif

概要とその他のリソース

Web開発者は、Web Widget（従来版）のz-index値を設定する最適な方法を選択できます。window.zESettingsオブジェクトはページ読み込みのz-indexを設定する機能を提供し、updateSettings APIはリアルタイムで変更を行う柔軟性を提供します。ウィジェットのカスタマイズの詳細については、次の記事を参照してください。Web Widget（従来版）の高度なカスタマイズ

翻訳に関する免責事項：この記事は、お客様の利便性のために自動翻訳ソフ トウェアによって翻訳されたものです。Zendeskでは、翻訳の正確さを期すために相応の努力を払っておりますが、翻訳の正確性につ いては保証いたしません。

翻訳された記事の内容の正確性に関して疑問が生じた場合は、正式版である英語の記事 を参照してください。

Powered by Zendesk