O plug-in pop-up de bootstrap fornece uma visualização estendida. O plug-in pop-up gera conteúdo e tags de acordo com os requisitos. Por padrão, os pop-ups são colocados atrás de seus elementos de gatilho.
Uma popover é semelhante a uma dica de ferramenta, fornecendo uma visualização estendida. Para ativar a caixa pop-up, o usuário só precisa pairar sobre o elemento. O conteúdo da caixa pop-up pode ser totalmente preenchido usando a API de dados de bootstrap (Bootstrap Data API). Este método depende de dicas de ferramentas.
Se você deseja fazer referência à funcionalidade do plug -in separadamente, é necessário fazer referência a Popover.js, que depende do plug -in da dica de ferramenta. Ou, como mencionado no capítulo Visão geral do plug -in Bootstrap, você pode consultar o bootstrap.js ou versões compactadas do bootstrap.min.js.
1. Uso
O plug -in do Popover gera conteúdo e tags com base nas necessidades. Por padrão, as popovers são colocadas atrás de seus elementos de gatilho. Você pode adicionar popovers de duas maneiras:
Passe a propriedade de dados: para adicionar um popover, basta adicionar data-toggle = "popover" a um rótulo de âncora/botão. O título da âncora é o texto do popover. Por padrão, o plug -in define o popover na parte superior.
<a href = "#" data-toggle = "popover"> Por favor, passe o mouse sobre o meu </a>
Através do JavaScript: Ativar popover via JavaScript:
$ ('#identificador'). Popover (opções)
O plug-in Popover não é como os menus suspensos e outros plug-ins discutidos anteriormente, não é um plug-in puro do CSS. Para usar o plug -in, você deve ativá -lo usando o jQuery (leia JavaScript). Use o script a seguir para ativar todos os popovers da página:
$ (function () {$ ("[Data-toggle = 'Popover']"). Popover ();});
2. Exemplos
Uma caixa pop-up é clicar em um elemento para exibir um contêiner contendo o título e o conteúdo.
// Uso básico <botão tipo = "Button" Data-Toggle = "Popover" Data-content = "Este é um plugin de caixa pop-up"> Clique para aparecer/ocultar a caixa pop-up </botão> // javascript inicialize $ ('botão'). Popover ();O plug-in pop-up possui muitas propriedades para configurar a exibição de prompts, como segue:
$ ('Button'). Popover ({contêiner: 'corpo', viewport: {Selector: '#View', preenchimento: 10,}});Existem quatro métodos para executar através do JavaScript.
// Mostrar $ ('Button'). Popover ('show'); // ocultar $ ('botão'). Popover ('hide'); // Invert show e ocultar $ ('botão'). Popover ('alternar'); // ocultar e destruir $ ('botão'). Popover ('');Existem quatro tipos de eventos no plug -in do Popover:
// eventos, outros semelhantes a $ ('Button').O acima é tudo sobre este artigo. Espero que seja útil que todos aprendam o plug-in pop-up do Bootstrap.