bootstrap

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."); }); });

bootstrap

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

Headline