caixa de modal Bootstrap (Modal) Widget
Modal Box (Modal) é sobreposto no subformulário formulário pai. Geralmente, o objetivo é mostrar o conteúdo de uma única fonte, e pode ter alguma interação sem sair do formulário pai. Subformulário pode fornecer informação, interacção e assim por diante.
Se você quiser para se referir às características individuais de plug-in, você precisa fazer referênciamodal.js.Ou, como Bootstrap plug-in Overview capítulo mencionado, você pode se referir abootstrap.jsou versão comprimida debootstrap.min.js.
uso
Pode mudar o conteúdo oculto caixa de modal (modal) plug-in:
- Através de atributos de dados: definir as propriedades de dados-toggle = "modal"nos elementos do controlador (como botões ou links) edefina-alvo de dados = "# identificador"ouhref = "# identificador"para atribuir um modo específico de ser mudado caixa de estado (com id = "identificador").
- Por JavaScript: Usando esta técnica, você pode por uma simples linha de JavaScript para chamar a caixa de modal com id = "identificador" de:
$ ( "# Identificador '). Modal (opções)
Exemplos
Um exemplo janela modal estático, como mostrado nos exemplos seguintes:
Exemplos
<H2> caixa de modal criar (Modal) </ h2>
<! - Botão para acionar a caixa de modal ->
<Button class = "btn btn-primário btn -LG" Dados-toggle = "modal" data-target = "#myModal"> Iniciar demo quadro modal </ button>
<! - Caixa de Modal (Modal) ->
<Div class = "fade modal" id = "myModal" tabindex = "-1" role = "diálogo" aria-labelledby = "myModalLabel" aria escondida = "true">
<Div class = "modal-dialog">
<Div class = "modal-content">
<Div class = "modal-header">
<Button type = "button" class = "close" dados descartar = "modal" oculto-aria = "true"> & vezes; </ button>
<H4 class = "modal-título" id = "myModalLabel"> caixa de modal (modal) Título </ h4>
</ Div>
<Div class = "modal-body"> adicionar algum texto aqui </ div>
<Div class = "modal-footer">
<Button type = "button" class = "btn btn-default" -Descartar dados = "modal"> Fechar </ button>
<Button type = "button" class = "btn btn-primário" > Enviar alterações </ button>
</ Div>
</ Div> <! - /.modal-content ->
</ Div> <! - /.modal ->
</ Div>
tente »
Os resultados são os seguintes:
- janela modal, você precisa ter algum tipo de gatilho. Você pode usar os botões ou links. Aqui nós estamos usando um botão.
- Se você olhar atentamente para o código acima, você vai encontrar no <button>tag, data-target = "# myModal " é o objetivo que você deseja carregar em uma caixa página modal.Você pode criar a caixa modal múltiplos na página, e em seguida, criar gatilhos diferentes para cada uma caixa de modal. Agora, obviamente, você não pode carregar vários módulos ao mesmo tempo, mas você pode criar múltiplos de carregamento em momentos diferentes na página.
- Modal box Duas coisas a serem observados:
- O primeiro é.modal, para o <div> reconhecer caixa de modal conteúdo.
- A segunda é.fade classe.Quando a caixa de modal é ligado, ele fará com que o conteúdo desaparecer.
- aria-labelledby = "myModalLabel", a referências a atributos título da caixa modal.
- Propriedadearia escondida = "true" para a realização de uma janela modal não é visível até que o gatilho é disparado para cima (como clicar no botão relevante).
- estilo de cabeça <div class = "modal-header">, modal-header é definida classe de janela modal.
- class = "close", perto é uma classe CSS, janela modal é usado para definir o estilo do botão Fechar.
- dados descartar = "modal", atributo de dados HTML5 é um costume.Nos casos em que é utilizada para fechar a janela modal.
- class = "modal-body", é um CSS Bootstrap classe CSS para o estilo definido como a janela modal principal.
- class = "modal-footer", é um CSS Bootstrap classe CSS para denominar a parte inferior da janela modal.
- Dados-toggle = "modal", HTML5 dados personalizados dados de atributos-toggle para abrir a janela modal.
opções
Existem algumas opções que podem ser usados para personalizar a janela modal (modal janela) olhar e sentir, que são obtidos por atributos de dados ou JavaScript para passar. A tabela a seguir lista estas opções:
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| backdrop | boolean 或 string 'static' 默认值：true | data-backdrop | 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。 |
| keyboard | boolean 默认值：true | data-keyboard | 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。 |
| show | boolean 默认值：true | data-show | 当初始化时显示模态框。 |
| remote | path 默认值：false | data-remote | 使用 jQuery.load方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示：
<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a> |
caminho
Aqui estão alguns métodos úteis e modal () usados juntos.
| 方法 | 描述 | 实例 |
|---|---|---|
| Options:.modal(options) | 把内容作为模态框激活。接受一个可选的选项对象。 |
$('#identifier').modal({
keyboard: false
})
|
| Toggle:.modal('toggle') | 手动切换模态框。 |
$('#identifier').modal('toggle')
|
| Show:.modal('show') | 手动打开模态框。 |
$('#identifier').modal('show')
|
| Hide:.modal('hide') | 手动隐藏模态框。 |
$('#identifier').modal('hide')
|
Exemplos
O exemplo seguinte demonstra o método:
Exemplos
<! - Caixa de Modal (Modal) ->
<Div class = "fade modal" id = "myModal" tabindex = "-1" role = "diálogo" aria-labelledby = "myModalLabel" aria escondida = "true">
<Div class = "modal-dialog">
<Div class = "modal-content">
<Div class = "modal-header">
<Button type = "button" class = "close" dados descartar = "modal" oculto-aria = "true"> × </ button>
<H4 class = "modal-título" id = "myModalLabel"> caixa de modal (modal) Título </ h4>
</ Div>
<Div class = "modal-body"> Pressione o botão ESC para sair. </ Div>
<Div class = "modal-footer">
<Button type = "button" class = "btn btn-default" -Descartar dados = "modal"> Fechar </ button>
<Button type = "button" class = "btn btn-primário" > Enviar alterações </ button>
</ Div>
</ Div> <! - /.modal-content ->
</ Div> <! - /.modal-dialog ->
</ Div>
<! - /.modal ->
<Script> $ (function () {$ ( '# myModal') modal ({teclado :. true})}); </ script>
tente »
Os resultados são os seguintes:
Basta clicar tecla ESC, a janela modal é sair.
evento
A tabela a seguir lista o evento para usar a caixa de modal. Estes eventos podem ser usados quando a função de gancho.
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.modal | 在调用 show 方法后触发。 |
$('#identifier').on('show.bs.modal', function () {
// 执行一些动作...
})
|
| shown.bs.modal | 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 |
$('#identifier').on('shown.bs.modal', function () {
// 执行一些动作...
})
|
| hide.bs.modal | 当调用 hide 实例方法时触发。 |
$('#identifier').on('hide.bs.modal', function () {
// 执行一些动作...
})
|
| hidden.bs.modal | 当模态框完全对用户隐藏时触发。 |
$('#identifier').on('hidden.bs.modal', function () {
// 执行一些动作...
})
|
Exemplos
O exemplo a seguir demonstra o uso do evento:
Exemplos
<! - Caixa de Modal (Modal) ->
<H2> caixa de modal (modal) Plug-in eventos </ h2>
<! - Botão para acionar a caixa de modal ->
<Button class = "btn btn-primário btn -LG" Dados-toggle = "modal" data-target = "#myModal"> Iniciar demo quadro modal </ button>
<! - Caixa de Modal (Modal) ->
<Div class = "fade modal" id = "myModal" tabindex = "-1" role = "diálogo" aria-labelledby = "myModalLabel" aria escondida = "true">
<Div class = "modal-dialog">
<Div class = "modal-content">
<Div class = "modal-header">
<Button type = "button" class = "close" dados descartar = "modal" oculto-aria = "true"> × </ button>
<H4 class = "modal-título" id = "myModalLabel"> caixa de modal (modal) Título </ h4>
</ Div>
<Div class = "modal-body"> Clique no botão Fechar para verificar a função de evento. </ Div>
<Div class = "modal-footer">
<Button type = "button" class = "btn btn-default" -Descartar dados = "modal"> Fechar </ button>
<Button type = "button" class = "btn btn-primário" > Enviar alterações </ button>
</ Div>
</ Div> <! - /.modal-content ->
</ Div> <! - /.modal-dialog ->
</ Div>
<! - /.modal ->
<Script> $}) (função () {$ ( '# myModal') modal ( 'esconder')});. </ Script>
<Script> $ (function () {$ ( '# myModal') em ( 'hide.bs.modal', function () {alert ( ' Hey, eu ouvi-lo como a caixa modal ...'); })}); </ script >
tente »
Os resultados são os seguintes:
Como mostrado no exemplo acima, se você clicar no botãofechar,ocultar evento, é exibida uma mensagem de aviso.