[Web] Bootstrap modal plugin 彈出控制 (by javascript)

bootstrap中有個modal plugin，

modal 在設計的過程，有分彈出和收合，

彈出、收合可再細分為 1. 彈出當下、2. 彈出後 3. 收合當下、4. 收合後。

用下面的程式碼簡單演練，

HTML:

先創建一個 id 叫做 modal-button 的按鈕，
再寫一個 id 叫做 popout 的 modal ，
程式碼記得要引入bootstrap.js。

再來是 js 事件的綁定，

Javascript:

//1.彈出當下，將按鈕改為紅色
$((){
$("#popout").on("show.bs.modal", (){
$("#modal-button").css("background-color","red");
alert("Modal show and the button changes to red.");
});
//2.彈出後，將按鈕改為藍色
$("#popout").on("shown.bs.modal", (){
$("#modal-button").css("background-color","blue");
alert("Modal show and the button changes to blue.");
});
//3.收合當下，將按鈕改為黃色
$("#popout").on("hide.bs.modal", (){
$("#modal-button").css("background-color","yellow");
alert("Modal show and the button changes to yellow.");
});
//4.收合後，將按鈕改回白色
$("#popout").on("hidden.bs.modal", (){
$("#modal-button").css("background-color","white");
alert("Modal show and the button changes to white.");
});
});