Add overly with fab speed dial

1

how can i add a dark overlay to the page when fab speed dial is open?

page content is distracting when i want the user to focus on the fab opened speed dial options

2

This will require a bit of custom code
In your HTML add fab-backdrop element before FAB:

...
<div class="fab-backdrop"></div>
<!-- your FAB -->
<div class="fab">...</div>

Add this to CSS:

.fab-backdrop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  /* less than FAB's z-index */
  z-index: 1300;
  visibility: hidden;
  opacity: 0;
  transition-duration: .4s;
}
.fab-backdrop.backdrop-in {
  opacity: 1;
  visibility: visible;
}

And this to JS:

$('.fab').on('fab:open', () => {
  $('.fab-backdrop').addClass('backdrop-in');
})
$('.fab').on('fab:close', () => {
  $('.fab-backdrop').removeClass('backdrop-in');
})
$('.fab-backdrop').on('click', () => {
  app.fab.close()
})
2 Likes
3

works 100% and it have animation to the backdrop show and hide too!
Thanks a lot vlad.
im honored to support this framework

1 Like