bootstrap中有個modal plugin，
modal 在設計的過程，有分彈出和收合，
彈出、收合可再細分為 1. 彈出當下、2. 彈出後 3. 收合當下、4. 收合後。
用下面的程式碼簡單演練，
HTML:
先創建一個 id 叫做 modal-button 的按鈕，
再寫一個 id 叫做 popout 的 modal ，
程式碼記得要引入bootstrap.js。
再來是 js 事件的綁定，
Javascript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//1.彈出當下，將按鈕改為紅色 $(function(){ $("#popout").on("show.bs.modal", function(){ $("#modal-button").css("background-color","red"); alert("Modal show and the button changes to red."); }); //2.彈出後，將按鈕改為藍色 $("#popout").on("shown.bs.modal", function(){ $("#modal-button").css("background-color","blue"); alert("Modal show and the button changes to blue."); }); //3.收合當下，將按鈕改為黃色 $("#popout").on("hide.bs.modal", function(){ $("#modal-button").css("background-color","yellow"); alert("Modal show and the button changes to yellow."); }); //4.收合後，將按鈕改回白色 $("#popout").on("hidden.bs.modal", function(){ $("#modal-button").css("background-color","white"); alert("Modal show and the button changes to white."); }); }); |
留言