0

Tenho este Popover e gostaria que ao carregar a página ele fosse aberto, e só fechasse após o usuário clicar no Entendi

inserir a descrição da imagem aqui

o código que estou utilizando é este Script:

    $(document).ready(function () {
        // Associa o evento do popover ao clicar no link.
            $('#Responsivo').popover({
                //trigger: 'manual',
                placement: 'bottom',
                html: true,
                title: 'O que é um site ou software responsivo?',
                content: $('#div-popover').html() // Adiciona o conteúdo da div oculta para dentro do popover.
            }).click(function (e) {
                e.preventDefault();
                // Exibe o popover.
                $(this).popover('show');
            });
    });

o texto da Tag:

<h4><b>Criação de Sites e Softwares <span id="Responsivo" >responsivos</span>:</b></h4>

e este Modal para o Popover:

<div id="div-popover" class="hide">
    Dizer que um site ou um software é repsonsivo, indica que ele pode ser utilizado em computadores, tablets, tvs e celulares smartphones. o conteúdo do seu site, se ajusta de acordo com a tela do disposivo.
    <br /><br />
    <button id="close" class="btn btn-primary">Entendi</button>
</div>

obs: para fechar tentei fazer o script que fizesse hide na div, mas não rolou, acredito que por que a divsó está sendo exibida no Popover, então teria que fechar o Popovere não a div.

    $('#close').click(function () {
        $('#div-popover').hide();
    });
6
  • Consegue prover um Fiddle para que possamos simular?
    – BrTkCa
    Commented 23/12/2016 às 17:44
  • 1
    $('#Responsivo').popover({ .. }).popover("show"); não funciona?
    – relaxeaza
    Commented 23/12/2016 às 17:53
  • @RafaelMafra funcionou para carregar sim :) valeu pela dica, sabe como faço para que feche pelo botão? Commented 23/12/2016 às 18:08
  • No seu evento .click substitua $('#div-popover').hide(); por $('#Responsivo').popover('hide') ..
    – relaxeaza
    Commented 23/12/2016 às 18:12
  • Não rolou pra fechar Commented 23/12/2016 às 18:16

2 Respostas 2

2

Basta adicionar um .popover('show') na criação do popup.

$(document).ready(function() {
    // Associa o evento do popover ao clicar no link.
    $('#Responsivo').popover({
        //trigger: 'manual',
        placement: 'bottom',
        html: true,
        title: 'O que é um site ou software responsivo?',
        content: $('#div-popover').html() // Adiciona o conteúdo da div oculta para dentro do popover.
    }).click(function(e) {
        e.preventDefault();
        // Exibe o popover.
        $(this).popover('show');
    }).popover('show');
});

Para fechar a partir do botão..

$('#close').click(function() {
    $('#Responsivo').popover('hide');
});
4
  • o popover não fechou Commented 23/12/2016 às 18:17
  • 1
    Qual é esse plugin que você está usando?
    – relaxeaza
    Commented 23/12/2016 às 18:19
  • sou meio novato ainda na programação, como verifico? Commented 23/12/2016 às 18:25
  • consegui fazendo assim ´button id="close" onclick="$('#Responsivo').popover('hide')" class="btn btn-primary">Entendi</button>´ colocando o evento diretamente no botão Commented 23/12/2016 às 18:28
1

Pode usar o evento show.bs.popover

$(document).ready(function () {

    $('#Responsivo').popover({
        //trigger: 'manual',
        placement: 'bottom',
        html: true,
        title: 'O que é um site ou software responsivo?',
        content: $('#div-popover').html() // Adiciona o conteúdo da div oculta para dentro do popover.
    }).popover('show');

});

E para fechar:

$(document).on('click', 'button#close', function () {
    $('#Responsivo').popover('hide');
});

Exemplo

10
  • Não funcionou... ele abre se eu clicar em cima do texto Responsivo, e só fecha se eu clicar em cima do texto também, o botão close não fechou, e não abriu ao carregar a página Commented 23/12/2016 às 18:05
  • Editei o código. Commented 23/12/2016 às 18:09
  • Não fechou o popover Commented 23/12/2016 às 18:17
  • .on('hidden.bs.popover') realmente executa algo?
    – relaxeaza
    Commented 23/12/2016 às 18:23
  • 1
    na vdd eu fiz pra testar.. pois notei que não estava chamando o evento quando clicava no botão. eu coloquei um alert pra ver se ia ser executado, e não executou Commented 23/12/2016 às 18:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .