CODEWITHSUNDEEP
jquerytwitter-bootstrapmodal-dialogpopover
Ricardo Binns
Ricardo Binns

Reputation: 3246

twitter bootstrap modal with popover inside

I'm trying to display a popover inside a modal, everything works greate until i start to work with show event from modal.

All the time that popover open, the show event from modal is fired, live demo here

what i'm missing ?

// this will open a popover
$("#show-pop-over").on("click", function(){
    var popover = "<div class='popover-content-wrapper' style='display: none;'><a href='#'>Hello ya!</a></div>";
    $("body").append(popover);
    $(this).popover({
        html: true,
        placement: "top",
        title: "Title",
        content: function () {
            return $('.popover-content-wrapper').html();
        }
    }).popover("show");
});

// should fire when modal only
$("body").on("show", "#myModal", function(){
    alert('modal on show event');
});

Upvotes: 3

Views: 3188

Answers (1)

mccannf
mccannf

Reputation: 16659

As far as I can tell, the show event of the popover is propagating from the #myModal div, so the event handler:

// should fire when modal only
$("body").on("show", "#myModal", function(){
    alert('modal on show event');
});

is firing correctly.

As a workaround, the following will only alert if the modal is shown:

// should fire when modal only
$("body").on("show", "#myModal", function(e){
    if ($(e.target).hasClass("modal")) {
       alert('modal on show event');
    }
});

Upvotes: 1

Related Questions