Adicione uma pequena sobreposição ao conteúdo da página, assim como os efeitos no iPad, adicionando informações extras aos elementos da página.
Dependências de plug -in
A caixa pop-up depende do plug-in da tampa de ferramentas, portanto o plug-in da dica de ferramenta precisa ser carregado primeiro.
Função de adição seletiva
Para considerações de desempenho, a API de atributo de dados de dicas de ferramentas e componentes pop-up é opcionalmente adicionada, o que significa que você deve inicializá-las.
Configurações adicionais são necessárias quando as caixas pop-up são usadas em grupos de botões e grupos de caixas de entrada
Quando a caixa de prompt é usada em conjunto com .btn-group ou .input-group, você precisa especificar o contêiner: a opção 'corpo' (consulte a documentação abaixo) para evitar efeitos colaterais indesejados (por exemplo, quando a caixa pop-up aparecer, os elementos da página que cooperam com ela podem se tornar mais largos ou desperdiçados).
Ao usar caixas pop-up em elementos de página proibidos, você precisa adicionar um elemento extra para embrulhá-lo
Para adicionar uma caixa pop -up a um elemento desativado ou. Disabled, embrulhe o elemento de página que precisa ser adicionado à caixa pop -up em um <div> e aplique uma caixa pop -up a este elemento <div>.
1. Casos estáticos
4 Opções opcionais: arranjo superior, direita, inferior e esquerda.
Segmento de código
.bs-exemplo {border-color: #dd; Radio de fronteira: 4px 4px 0 0; largura de borda: 1px; Shadow Box: Nenhum; margem-esquerda: 0; Margem-direita: 0; estilo de fronteira: sólido; } .bs-Exemplo-popover .popover {position: relativo; exibição: bloco; flutuar: esquerda; Largura: 240px; margem: 20px; }<H1> 3. Caixa pop -up </h1> <div> <div> <div> </div> <h3> Popover top </h3> <div> <p> sed posuere consecteter est em lobortis. AENEANO UE LEO QUAM. Pentelesesque ornare sem lacinia quam venenatis vestibulum. AENEANO UE LEO QUAM. Pentelezesque ornare sem lacinia quam venenatis. AENEANO UE LEO QUAM. Pentelesesque ornare sem lacinia quam venenatis vestibulum. AENEANO UE LEO QUAM. Pentelesesque ornare sem lacinia quam venenatis vestibulum. AENEANO UE LEO QUAM. Pentelelesque ornare sem lacinia quam venenatis vestibulum.
Efeito de visualização
Trenó de código:
<a href="javascript:void(0)" id="a_pop" data-placement="bottom" data-content=" The wind and rain are like spending time catching up with the white horse. You are still holding the dream in your young palm. Are the clouds surging into summer tears evaporated by the years. Who is she lost on this road? We said we should not separate and be together forever, even if we are enemies with time, even if we Estão se desviando do mundo inteiro, o vento e iluminam os flocos de neve sopravam o nosso cabelo. Você disse uma vez que não deveria se separar e ficar juntos para sempre, e agora quero perguntar se você é apenas um ditado infantil, anos inocentes não podem suportar a juventude. Eu vou viver de acordo com você. A neve pesada, por favor, não apague os traços de nosso estar juntos. A neve pesada não pode apagar as marcas que nos damos. Hoje à noite, a grama está separada e a noite da lua brilhante enviará milhares de quilômetros para esperar o vento do outono chegar. "Dados-original-title =" Hora para ferver a chuva "> Clique para carregar </a>
<strong> JS Inicialização: </strong> <script type = "text/javascript"> $ ("#a_pop"). Popover (); </script>Efeito de visualização:
Observe que, quando um posicionamento for especificado, preste atenção especial às questões de direção. Como a caixa pop-up começa a aparecer com o centro do elemento de eventos de gatilho, é provável que seja substituído e não pode ser exibido todos eles.
O atributo a tag href no código deve ser especificado como javascript: void (0) para remover o efeito do link.
Quatro direções:
Código
<a href = "javascript: void (0)" id = "a_pop1" data-posting = "esquerda" dados-content = "o vento e a chuva são como passar tempo para recuperar o cavalo branco. Você ainda está segurando seu sono em sua palmeira? <a href = "javascript: void (0)" id = "a_pop2" data-posting = "top" dados-content = "disse que não devemos nos separar e devemos sempre estar juntos, mesmo que sejamos inimigos com o tempo, mesmo que estivéssemos partindo de todo o mundo, o vento e os flocos de neve sonhamos. Dados-original-title = "Hora para ferver a chuva"> superior </a> <a href = "javascript: void (0)" id = "a_pop3" data-posting = "inferior" dados-content = "os desejos infinitos feitos no meio do verão, que devemos, que devemos fazer as mãos e as mãos para cruzar o rio. palavras da criança. " Dados-original-title = "Hora para ferver a chuva"> Abaixe </a> <a href = "javascript: void (0)" id = "a_pop4" data-posting = "Right" Data-content = "Os anos inocentes não podem suportar jovens que eu vive a você. Outros. $ ("#a_pop2"). Popover (); $ ("#a_pop3"). Popover (); $ ("#a_pop4"). Popover (); </script>Efeitos de visualização;
2. Opções
As opções podem ser passadas através de propriedades de dados ou JavaScript. Para o atributo de dados, você precisa colocar o nome da opção após os dados, por exemplo, dados-animação = "".
Aplicar propriedades de dados em uma única caixa pop-up
Para uma única caixa pop -up, você pode especificar opções separadamente através da propriedade de dados, como mostrado acima.
3. Método
$ (). Popover (opções)
Inicializa a caixa pop-up para um conjunto de elementos.
.popover ('show')
Mostra a caixa pop-up.
$ ('#elemento'). Popover ('show')
.Popover ('hide')
Esconda a caixa pop-up.
$ ('#elemento'). Popover ('hide')
.Popover ('alternar')
Mostre ou oculte a caixa pop-up.
$ ('#elemento'). Popover ('alterna')
.popover ('destruir')
Esconda e destrua a caixa pop-up.
$ ('#elemento'). Popover ('Destroy')
4. Eventos
$ ('#myPopover').Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O acima é tudo sobre este artigo. Espero que seja útil que todos aprendam e dominem a caixa pop-up do bootstrap.