back
アラート・ダイアログ・折りたたみ表示 (2/5)
■アラート表示のON/OFF
このアラートは、ページに最初っから表示しっぱなしのものです。ただのデザインなのです。が、実際のアラートは、必要に応じて画面に表示したり、あるいはクローズボックスで閉じたりできないといけないでしょう。
こうしたアラートらしい操作のためには、いくつか追加する要素が必要です。まず、アラートの中にクローズボックスの表示を用意する必要があるでしょう。そして、アラートを表示するためのボタンなども用意しておくことになるでしょう。
・クロースボックス
閉じて消える際にエフェクトを掛けることもできます。これは、アラートの<div>タグに「fade in」のクラスを追加します。これで「じわっ」とアラートを消すことができるようになります。
これで「クリックして閉じるアラート」でできました。では、アラートを非表示にしておいて、ボタンなどをクリックして表示させるにはどうするのでしょう？
・アラートを非表示にしておく
これは、実は簡単です。スタイルを設定して隠しておけばいいのです。アラートの<div>タグに、こんな形でスタイル設定すればいいでしょう。
・アラートを表示する
アラートを表示させるには、非表示になっている<div>タグを表示させればいいことになります。これは、jQueryのshowメソッドを使うのが簡単でしょう。
では、簡単な利用例を挙げておきましょう。ページにアクセスし、「Show Alert」ボタンを押すとアラートが表示されます。そしてクローズボックスをクリックすれば、アラートを閉じます。
こうしたアラートらしい操作のためには、いくつか追加する要素が必要です。まず、アラートの中にクローズボックスの表示を用意する必要があるでしょう。そして、アラートを表示するためのボタンなども用意しておくことになるでしょう。
・クロースボックス
<a href="#" data-dismiss="alert" >×</a>クローズボックスは、<a>タグとして用意しておきます。これは、「data-dismiss="alert"」という属性を必ず用意して作成します。これを用意することで、アラートの右上にクローズボックスを表示できます。なお、クローズボックスの「×」は、<a>タグに「×」を表示させることで作ります。
閉じて消える際にエフェクトを掛けることもできます。これは、アラートの<div>タグに「fade in」のクラスを追加します。これで「じわっ」とアラートを消すことができるようになります。
■アラートを表示させる
これで「クリックして閉じるアラート」でできました。では、アラートを非表示にしておいて、ボタンなどをクリックして表示させるにはどうするのでしょう？
・アラートを非表示にしておく
これは、実は簡単です。スタイルを設定して隠しておけばいいのです。アラートの<div>タグに、こんな形でスタイル設定すればいいでしょう。
style="display:none;"
・アラートを表示する
アラートを表示させるには、非表示になっている<div>タグを表示させればいいことになります。これは、jQueryのshowメソッドを使うのが簡単でしょう。
$( アラート・タグの指定 ).show();<button>タグなどから、onclickでこのように実行すれば、クリックしてアラートを表示させることができるようになります。
では、簡単な利用例を挙げておきましょう。ページにアクセスし、「Show Alert」ボタンを押すとアラートが表示されます。そしてクローズボックスをクリックすれば、アラートを閉じます。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
</head>
<body >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>アラート・ダイアログ</h1>
<h2 >Alert</h2>
</div>
<div>
<button class="btn btn-default" onclick="$('#alert').show()">
Show Alert</button>
</div>
<div> </div>
<div id="alert" class="alert alert-success fade in" style="display:none;">
<a href="#" class="close" data-dismiss="alert"
aria-label="close">×</a>
<h4>Alert!</h4>
これは、アラートの表示です。
</div>
</div>
</div>
</div>
</body>
</html>
| << 前へ | 次へ >> |