Bootstrap 模態框(也可以說的彈出層)

本文轉載自查看原文 2014-05-13 08:19 6821 BootStrap/ bootstrap/ 模態框/ TypeError: $ is not a function

最近在嘗試使用bootstrap的模態框

使用模態框主要要引入一下幾個js和css:

bootstrap.css

jquery.1.9.1.js(這個可以靈活選擇)

bootstrap.js

html頁面的寫法如下:

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script  src="bootstrap/js/jquery.1.9.1.js"></script>
    <script  src="bootstrap/js/bootstrap.js"></script>

在寫模態框的時候使用的class主要有:

modal hide fade in

modal-header

modal-body

modal-footer

此外必要的部分還需要設置data-dismiss="modal"

以下是實例:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>bootstrap擬態框</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script  src="bootstrap/js/jquery.1.9.1.js"></script>
    <script  src="bootstrap/js/bootstrap.js"></script>
    
</head>    

<body>
    <div class="container">
        <h2>我是擬態框的例子</h2>
        <div id="example" class="modal hide fade in" style="display:none;">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">X</a>
                <h3>我是擬態框的頭部</h3>
            </div>
            <div class="modal-body">
                <h4>我是擬態框的中間部分</h4>
                <p>我是描述部分</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-success">成功</a>
                <a href="#" class="btn" data-dismiss="modal">關閉</a>
            </div>
        </div>
        <p>
            <a href="#example" data-toggle="modal" class="btn btn-primary btn-large">點我彈出擬態框</a>
        </p>
    </div>

</body>
</html>

View Code

效果圖如下:

在測試實例的時候,遇到了TypeError: $ is not a function 這樣的錯誤.糾結了半天.后來想起了js的預加載機制,於是調換了下bootstrap.js和jquery.js的順序.即把jquery放在前面,就可以避免此問題的出現了.希望對大家有幫助.

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap中的模態框（modal，彈出層） bootstrap中的模態框（modal，彈出層） bootstrap中的模態框（modal，彈出層） Bootstrap學習5--bootstrap中的模態框（modal，彈出層） Bootstrap模態彈出框 bootstrap 模態框中彈出層 input不能獲得焦點且不可編輯 Bootstrap的模態框無法彈出的問題 Js實例——模態框彈出層使用bootstrap模態框實現浮動層 Bootstrap使用模態框modal實現表單提交彈出框