レスポンシブの時はオーバーレイでのアラートが微妙な気がしたので（その２）

 

■ 前回の続きです

Parllet（個人で作成・公開しているアルファ版のWeb家計簿）の記事でちょくちょく載せる、スナップを兼ねたサンプルページ。（直近の記事はこれ）

前回、その記事の サンプルページ２ のオーバーレイの代わりに alertify.js を 組み込んで、表示してみました。

「モーダルだと直感的に分かるようにダイアログの背面は薄暗くしたいな～」

ということで今回は CSS の編集からです。

 

■ ざっくり環境

OS：Windows 7 Home Premium

ブラウザ：IE 11.0

 

■ CSS でイジる要素を見つける

遅まきながらサムリさんの

これからブログを始めようと思う人へ！まずは今の未熟な自分をさらけ出せ！話はそれからだ

の影響を受けて、自分の泥臭い体当たり作業をつらつら書いていきます。

不要な方は読み飛ばしてくださいませ。

 

私は普段 Parllet（パレット） の動きは IE で確認しています。

CSS でイジる対象の要素も、ソースを追うのが面倒な時は

F12 で出てくるツール（F12開発者ツール？）で見つけます。

 

私は "Unpin" で、別ウィンドウにしてしまうのが好きです。

 

で、要素の選択。

 

今回はダイアログの背面を薄暗くしたいので、その辺をクリック

 

id と class が何れも "alertify-cover" のdiv が選択されました。

（重なり方によっては、目的の要素がうまく選択出来ないこともあります。その時はひーこら、DOM Explorer 内を1個づつ開いて探します。）

 

■ 見つけた要素の CSS をイジる

あーでもないこーでもないと試す時は、F12開発者ツールでイジってみて確かめるんですが、

今回は大した変更じゃないので CSS ファイルを直接編集します。

ダイアログの背景 の .alertify-cover は alertify.core.css で以下のようになっています。

.alertify-cover {
    position: fixed; z-index: 99999;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color:white;
    filter:alpha(opacity=0);
    opacity:0;
}

流石の私でも background-color は分かります。

そして流石の私は opacity 云々の辺りから早くも怪しくなります。

 

あ、透明度系ってことは何となく憶えてるんですよ？

filter・・・ と opacity・・・ の２つはクロスブラウザ対応ってやつ？

background が白になってないし、不透明度０（透明度マックス）ってことでしょ？

でも不透明度マックスが100だったか何だったか分かんないな。

やっぱり検索です。

 

「filter alpha opacity」で検索して、あっちこっち見て書き方分かりました。

filter・・・ の方は不透明度マックスは100 で、

opacity・・・の方は不透明度マックスは1 ですね。

オーバーレイでの

background: rgba(0,0,0,0.7);

と同じ感じにしたいので、

alertify.core.css 内の .alertify-cover を以下のように修正

.alertify-cover {
    position: fixed; z-index: 99999;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: black;
    filter:alpha(opacity=70);
    opacity: 0.7;
}

 

■ 自分好みの調整

ダイアログ自体の背景色はもっと落ち着いててもいいと思うので、

Parllet（パレット） の背景色と同じにします。

alertify.default.css 内の .alertify を以下のように修正

.alertify {
    background: #efdeb4;
    border: 10px solid #333; /* browsers that don't support rgba */
    border: 10px solid rgba(0,0,0,.7);
    border-radius: 8px;
    box-shadow: 0 3px 3px rgba(0,0,0,.3);
    -webkit-background-clip: padding;     /* Safari 4? Chrome 6? */
       -moz-background-clip: padding;     /* Firefox 3.6 */
            background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

 

最後に前回の宿題。

aタグの文字色 は、オーバーレイの時はグレーで問題無かったですが、

現時点でもやはり薄くて見づらいので、グレーに設定したスタイルを取っ払います。

前回記載の strMsg の aタグの部分を以下のように修正

<a href='http://parllet.com' style='color: #eee;'>http://parllet.com</a>
　↓
<a href='http://parllet.com'>http://parllet.com</a>

 

はい、いいと思います。

 

対応後のサンプルページです。（PCブラウザからの方は幅をいろいろ変えてみて下さい）

一応念のため。あくまでもローカル開発版を元にしたサンプルページなので、公開している Parllet（パレット） は相変わらずスマホ・タブレットからは使えません。

サンプルページ３

 

そんなようなことで、alertify.js の CSS 編集、終了です。

 

12/22 追記

予定外でしたが、続きを書きました。

 

タグ：F12開発者ツール Parllet 公開アプリ レスポンシブWebデザイン CSS 体当たり