Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。

BootstrapとjQueryでアラートを表示

Bootstrap と jQuery を使って、Webページにアラート(インフォメーション)を表示する方法を書いていきます。

1. イメージ

ボタン info alert を押すと、画面上部に水色のアラートが表示されて、

f:id:mamorums:20180829093545p:plain

warn alert を押すと黄色のアラートが表示されます。

×ボタンを押すとアラートが消えます。

2. コード例

アラートを表示させるコードは以下の通りです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<style>
.alert-top {
    top:50px;
    width:100%;
    display:none;
    text-align: center;
    margin-bottom: 0;
    padding:10px;
}
.buttons {
  margin:30px;
}
</style>
</head>
<body>
<div id="alert-info" class="alert alert-info alert-top" role="alert">
  <button type="button" class="close alert-close" aria-label="Close"><span aria-hidden="true">×</span></button>
  <span class="alert-msg"></span>
</div>
<div id="alert-warn" class="alert alert-warning alert-top" role="alert">
  <button type="button" class="close alert-close" aria-label="Close"><span aria-hidden="true">×</span></button>
  <span class="alert-msg"></span>
</div>
<div class="buttons">
  <button class="btn btn-info" id="info">info alert</button>
  <button class="btn btn-warning" id="warn">warn alert</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(function() {
  Alert = {
    show: function($div, msg) {
      $div.find('.alert-msg').text(msg);
      if ($div.css('display') === 'none') {
        $div.show();
      }
    },
    info: function(msg) {
      this.show($('#alert-info'), msg);
    },
    warn: function(msg) {
      this.show($('#alert-warn'), msg);
    }
  }
  $('body').on('click', '.alert-close', function() {
   $(this).parents('.alert').hide();
  });
  $('#info').click(function() {
    Alert.info('This is infomation alert.')
  });
  $('#warn').click(function() {
    Alert.warn('This is warning alert.')
  });
});
</script>
</body>
</html>

Bootstrap は 3.3.4、jQuery は 2.1.3 を使っています。jQueryバージョンは 1.12.x でも大丈夫そうな気がします。(Bootstrap 3.x だと jQuery 1.12.x が推奨されてたような気がします。)