浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【javascriptPlugin】cssでフッターをposition:fixedした時にハイライトされた要素が真っ白になるバグを修正する

driver.jsを使ってあるフッターをハイライトさせようとしたのですが、position:fixedを設定していると

ハイライトされた要素がdriver.jsのバックグラウンド色に隠れて

真っ白になってしまうことがあります。

通常はこのようにオブジェクト内でもある程度カスタマイズできるのですが、今回は

中のcssを触らないと直せないっぽい

 

driver.defineSteps([
{
element: ‘.home-tabbar’,
popover: {
title: ‘ホームタブ’,
description: ‘受け取り期限の近い申請や新着商品が<br/>確認できます’,
}

 

てなわけで今回はdriver.jsの中にあるdriver.min.jsの中にあるcssをいつも読み込んでいるcssに

コピーすることでオーバーライドする際の演出をカスタマイズすることが

できるようになっているデモンストレーションです。。

以下ハイライトする時の要素の領域を変更する設定

 

div#driver-highlighted-element-stage, div#driver-page-overlay {
background: transparent !important;
outline: 5000px solid rgba(0, 0, 0, .75);
}

 

driver-highlighted-element-stageがハイライトされる対象の領域で

div#driver-page-overlayはハイライトされる要素以外の暗い部分に当たります。

transparent(透明)にしているのでオーバーライドした要素以外の要素を

真っ白に塗り潰されることなく透過した状態で見ることができます。

他のプロパティも同じように現ファイルにコピーすることでカスタマイズが

できるようになります。

 

  • この記事いいね! (0)