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