デフォルトでは、「Alert messages」は復活できない

「Alert messages」仕様

・「Alert messages」は、デフォルトでは復活できない
・本来の「Alert」の意味合いから言ったらそうなるんだろうけど、でも、今回は「閉じたり開いたり」したい

---

方法1

「Bootstrap」の「data-dismiss」を使わずに、JQueryの「show()」「hide()」を利用
コード
・HTML

<button type="button" class="close">&times;</button>

<button type="button" class="open">&darr;</button>

<div class="alert alert-success">目次</div>

・JavaScript

$('.close').click(function() {



   $('.alert').hide();



})

$('.open').click(function() {



   $('.alert').show();



})	

・デモ

実際に試してみた感想
・ 「Bootstrap」の力を利用していないので、さらに手を加えないとフェードはしない
・「data-dismiss」を利用すると、同じクラスでも1件1件個別に消去可能だが、このJQueryのやり方では(クラス指定しているので、クラスを変更しない限りは)、個別削除できない

---

方法1-1

「Bootstrap」の「data-dismiss」を使わずに、JQueryの「show()」「hide()」を、HTMLに直書
コード
・HTML

<a href="#" onclick="$('.alert').show()">show</a>

		

<div class="alert fade in" style="display: none"> 

    <a class="close" onclick="$('.alert').hide()">×</a>  

    <strong>Warning!</strong> Best check yo self, you're not looking too good.  

</div>

・デモ(デフォルト オープン)
・デモ(デフォルト クローズ)

---

方法2

JQueryの「.on('click')」を利用
・具体的には、ボタンクリックで、「Bootstrapの機能を保持したalert」毎表示させる
コード
・HTML

<input type = "button" id = "clickme" value="Click me!"/>

<div id = "alert_placeholder"></div>

・JavaScript

bootstrap_alert = function() {}

bootstrap_alert.warning = function(message) {

            $('#alert_placeholder').html('<div class="alert"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')

        }



$('#clickme').on('click', function() {

            bootstrap_alert.warning('Your text goes here');

});

・デモ(デフォルト クローズ)
※JQuery「.on('click')」と「.click()」に違いはない

---

方法2-1

JQueryの「.on('click')」を利用、かつ、初めから「Alert」を表示させる
コード
・HTML

<input type = "button" id = "clickme" value="Click me!"/>

<div id = "alert_placeholder"></div>

・JavaScript

$(document).ready(function() {

            bootstrap_alert.warning('Your text goes here');

 });



bootstrap_alert = function() {}

bootstrap_alert.warning = function(message) {

            $('#alert_placeholder').html('<div class="alert"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')

        }

    

$('#clickme').on('click', function() {

            bootstrap_alert.warning('Your text goes here');

});

・デモ(デフォルト オープン）
※「方法2系」では、Alert削除する際、Bootstrap機能を利用しているため、「div class="alert alert-success fade in"」と記述すれば、フェード利用可能
・「Alertを閉じたらDOMから削除される」と書いているけど、「方法2系」でやっていることは「閉じた(削除した)Alert」を開くのではなくて、ボタンをクリックする度に新たに生成している