読者です 読者をやめる 読者になる 読者になる

ハイパーニートプログラマーへの道

頑張ったり頑張らなかったり

Bootstrapのalertのようなものを作ってみる

要はこういう風なものです。

http://getbootstrap.com/components/#alerts

See the Pen Notification Bar Examples by Noriyo Akita (@noriyotcp) on CodePen.

使った技術など

バツボタンを右に寄せる

単純にfloat: rightでいいのかなあと思ったのですが、アラートの幅が狭くなった時にはみ出てしまいます。

そこで参考にしたのはこちら

CSS にて複数行(高さが可変)の要素に対して縦揃えを中央に配置する方法 | phiary

本文では

まずセンタリングしたい要素の親要素に対して, position:absolute; を指定します.

とありますが、多分position: relativeの間違いなのでは。

まず親要素をposition: relativeにします。今回の場合、.alertです。

.alert {
  position: relative;
  ...
}

子要素である.closeをこのように定義します。

.close {
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
  ...
}

position: absolute と top: 50% で親要素の中央にtop の座標を移動させて, 更に transform: translateY(-50%) することで自分自身のサイズの半分の値を上に戻しています.

こうすることで要素の高さが変更されても中央揃えになります.

ここではさらにright: 1%;を追加し、右からの位置を調整しています。

リセットボタンについて

はじめは単純に.resetクラスにスタイルを定義していきましたが、ボタンの基本的なスタイルを.btnクラスに定義し、リセットボタン固有のスタイルは.resetクラスに定義するということにしました。

$grey: #cccccc;
.
.
.
.reset {
  background-color: transparent;
  border: solid 3px $grey;
  color: $grey;
  transition: background-color 0.5s linear 0.1s;
  &:hover {
    background-color: $grey;
    color: white;
  }
}

hoverした時の変化として、background-colortransitionをかけることにしました。

参考にしたのはこちら:

【CSS3】CSSで動きが出せるtransitionプロパティの概要を紹介します

【CSS3】CSSで動きが出せるtransitionプロパティの解説、実践編

background-color用の変数と@eachを使った定義

なんといいますか、はじめはこのようにベタに定義していたのですが

.success {
  background-color: #2ecc71;
}

.warning {
  background-color: #e67e22;
}

.danger {
  background-color: #e74c34;
}

せっかくSCSS使っていることだし、もう少し便利なやり方はないのかなと。

というわけで参考にしたのはこちら

sass - using hash with scss - Stack Overflow

@each in(with variable names)という方法がありまして、真似してみたのがこちら

$success: #2ecc71;
$warning: #e67e22;
$danger: #e74c34;
.
.
.
@each $name, $color in(
  'success': $success,
  'warning': $warning,
  'danger': $danger
) {
  .alert-#{$name} {
    background-color: $color;
  }
}

Bootstrapみたいにalert-successのような形で定義することにしました。

JS(jQuery)部分

こちらはなんてことないですが

$('.close').on('click', function() {
  $(this).parent('.alert').hide();
});

$('.reset').on('click', function() {
  $('.alert').show();
});

バツボタンをクリックした際にはアラート部分をhide()して、
リセットボタンをクリックするとアラートを全部show()しています。

でもあれですな、右下にCodepenの「RERUN」ボタンがあるので、わざわざリセットボタンを作る必要はなかったのでは・・・。