[jQuery] Bootstrap modals使用介紹與教學

on

何謂Bootstrap modals
        Boostrap提供許多JavaScript Plugins，Modal即是他其中之一的功能，他就是一個畫面的彈跳視窗，視窗裡面的內容可以由你在裡面撰寫的html。
        更詳細的請紹請看此篇 turorial : 當紅JavaScript Plugin : Bootstrap
     

     
範例程式碼
        自己在玩Boostrap的時候，記得到下載Bootstrap的js與css


<!-- 首先別忘了將你的jquery與boostrap.js給放進來 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style/bootstrap.css" /> 

</head>
<body>
    <!-- 設data-toggle="modal" 與 設href="#board-modal" href設的是你的modal id -->
    <a data-toggle="modal" href="#board-modal">開啟留言板</a>

    <!-- 在body實現你的程式碼 -->
    <div class="modal hide fade script-play-modal"  id="board-modal">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>留言板</h3>
        </div>
        <div data-role="content" class="modal-body">
            <div>
                <input class="span6" name="message" type="text"  placeholder="輸入訊息"/>
                <span class="btn ">送出</span>
            </div>
            <div id="board-content">
                
            </div>
        </div>
    </div>
    <script>
        // 利用js還可以針對他的開啟和關閉執行你想要執行的js程式碼喔
        $("#board-modal").off("show").on("show", function() {
            alert("我正在開啟");
        }).off("hide").on("hide", function() {
            alert("我正在關閉");
        });


    </script>
</body>

Comments

Post a Comment