Twitter Bootstrap Question posted in

Twitter bootstrap – How to make background body overlay when use twitter-bootstrap popover?

Currently I used this twitter-bootstrap popover:

<button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus"  data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
              Upgrade

The output:

enter image description here

How I can make the background overlay like bootstrap modal? My expected output

enter image description here

I use this jquery to popover

$(function(){
        $('[data-toggle="popover"]').popover({
            placement : 'bottom'
        });
});
Tags:

2

Answers


  1. 0

    Posting some more code would be nice.

    This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed.
    If you need help, comment.

    If it helps, +1.

    EDIT

    $(function() {
  $('[data-toggle="popover"]').popover({
    placement: 'bottom'
  });
  $("#buttonright").click(function() {
    $("div.overlay").toggleClass("on");
  });
  $("body").mouseup(function(){ 
      $("div.overlay").removeClass("on");
    });
});
    .overlay {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
}
.overlay.on {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
button {
  margin-top: 11px;
  padding-bottom: 4px;
  padding-top: 4px;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="overlay">
  <button id="buttonright" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Upgrade</button>
</div>

    This is the new snippet with the full code and behaviour.

    Login or Signup to reply.
  2. 0

    rather than binding to a click event, which can be a problem if you have multiple popover on click button triggers. Use bootstrap show and hide methods to display your overlay.

    Here is an example below:

       $(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        template: '<div class="popover extra" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    }).on('show.bs.popover', function() {
    $( "body" ).append( "<div class='overlay'></div>" );
      console.log("done");
    }).on('hide.bs.popover', function() {
    $( ".overlay" ).remove();
    })
    
});
    body {
    padding: 100px;
}
.popoverss {
  position: absolute;
background-color: red;
}
.overlay {
position: fixed;
left:0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 42%);
z-index: 90;
}

    http://jsfiddle.net/bakersingh/7j0bxyd1/2/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search