Bootstrap3模態框Modal垂直居中樣式

2021-09-27 02:44:32 字數 4140 閱讀 3825

1,bootstrap 模態框外掛程式bootbox垂直居中樣式:

/*模態框居中樣式

*/.bootbox-container

.bootbox-container:empty

.modal

.modal-dialog

/*//模態框居中樣式

*/style

>

<

script

>

$(function

() );

/*使用bootbox

*/bootbox.dialog().width(

155);

});script

>

head

>

<

body

>

<

h1>hello, world!

h1>

<

div

class

="bootbox-container"

>

div>

body

>

html

>

2,bootstrap模態框modal垂直居中樣式:

/*模態框居中樣式

*/.modal

.modal-dialog

/*//模態框居中樣式

*/style

>

head

>

<

body

>

<

h2>建立模態框(modal)

h2>

<

button

class

="btn btn-primary btn-lg"

data-toggle

="modal"

data-target

="#mymodal"

>開始演示模態框

button

>

<

div

class

="modal fade"

id="mymodal"

tabindex

="-1"

role

="dialog"

aria-labelledby

="mymodallabel"

aria-hidden

="true"

>

<

div

class

="modal-dialog"

>

<

div

class

="modal-content"

>

<

div

class

="modal-header"

>

<

button

type

="button"

class

="close"

data-dismiss

="modal"

aria-hidden

="true"

>

×button

>

<

h4 class

="modal-title"

id="mymodallabel"

>模態框(modal)標題

h4>

div>

<

div

class

="modal-body"

>

<

p>在這裡新增一些文字

p>

<

p>在這裡新增一些文字

p>

<

p>在這裡新增一些文字

p>

div>

<

div

class

="modal-footer"

>

<

button

type

="button"

class

="btn btn-default"

data-dismiss

="modal"

>關閉

button

>

<

button

type

="button"

class

="btn btn-primary"

>提交更改

button

>

div>

div>

div>

div>

body

>

html

>

bootstrap模態框垂直居中顯示 modal

html的部分 ok 方法1 今天測試時候發現bootstrap垂直居中時候有乙個問題,那就是模態框的高度沒有取到值 seterrormsgmodal modal dialog height 0,當模態框的高度不是特別大的時候,這個方法可以使用 大畫素的時候使用 不推薦使用 方法二 modal di...

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...