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

最近在嘗試使用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
>

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
>

效果圖如下:

在測試例項的時候,遇到了typeerror: $ is not a function

這樣的錯誤.糾結了半天.後來想起了js的預載入機制,於是調換了下bootstrap.js和jquery.js的順序.即把jquery放在前面,就可以避免此問題的出現了.希望對大家有幫助.

Bootstrap模態框Modal外掛程式

前提是要引入bootstrap.min.js modal 是覆蓋在父窗體上的子窗體。通常，目的是顯示來自乙個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供資訊 互動等。1.先定義乙個按鈕 data toggle 以什麼事件觸發，如modal,popover,tooltips等 d...

Bootstrap模態框簡單使用

專案中遇到，記錄一下。引入bootstrap的js和css就可以，官網有就不寫了 html modal fade id my modal tabindex 1 role dialog aria labelledby mymodallabel1 aria hidden true modal dialo...

Bootstrap模態框使用詳解

一.模態框的正常點選出現，如新增功能 新增 二.還有一種就是編輯，此時在彈出模態框時，裡面要寫入資料，所以要先取得資料再彈出模態框。這時要加入js 控制 1.jsp頁面 修改2.js 修改使用者 將使用者資訊寫入模態框 function updatesystemuser else dialog.mo...