Open Popover by clicking the tab and closing only by the button

Asked

Viewed 807 times

0

I have this Popover and would like when loading the page to be opened, and only close after the user click on Entendi

inserir a descrição da imagem aqui

the code I’m using is this 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');
            });
    });

the text of Tag:

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

and this Modal to the 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: to close I tried to do the script that made hide in div, but it didn’t, I believe that why the divis only being displayed on Popover, then I would have to close the Popoverand not the div.

    $('#close').click(function () {
        $('#div-popover').hide();
    });
javascript popover

  • Can provide a Fiddle so we can simulate?

  • 1

    $('#Responsivo').popover({ .. }).popover("show"); doesn’t work?

  • @Rafaelmafra worked to load yes :) thanks for the tip, know how to close by the button?

  • At your event .click substitute $('#div-popover').hide(); for $('#Responsivo').popover('hide') ..

  • Didn’t roll to close

  • I put an answer, see if it works.

Show 1 more comment

2 answers

2

Just add a .popover('show') in the creation of the 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');
});

To close from the button..

$('#close').click(function() {
    $('#Responsivo').popover('hide');
});

  • The Pover did not close

  • 1

    What is this plugin you are using?

  • I’m kind of new to programming, as I see?

  • I managed to make button id="close" onclick="$('#Responsive'). Popover('Hide')" class="btn btn-Primary">I got</button> by placing the event directly on the button

1


You can use the event 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');

});

And to close:

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

Example

  • It didn’t work... it opens if I click on the text Responsivo, and only closes if I click on the text too, the close button did not close, and did not open when loading the page

  • I edited the code.

  • Didn’t close the Pover

  • .on('hidden.bs.popover') really runs something?

  • No @Rafaelmafra. This is an event, I said wrong.

  • got by doing so: button id="close" onclick="$('#Responsivo').popover('hide')" class="btn btn-primary">Entendi</button> adding the event directly on the button... Thanks for the help

  • It sucks, bro. It makes the JS cleaner and more beautiful. It makes the right.

  • 1

    in vdd I made to test.. because I noticed that I was not calling the event when clicking the button. I put an Alert to see if it was going to run, and it didn’t run

  • You’re probably putting the $('#Responsivo').click() outside the $(document).ready()

  • I got the code, bro. That’s right now. I even posted an example on Fiddle.

Show 5 more comments

Browser other questions tagged javascript popover

You are not signed in. Login or sign up in order to post.