9

Tengo un botón flotante con el que doy la opción de compartir mi página, al darle clic se despliegan las alternativas para hacerlo.

Lo que deseo lograr es que al hacer clic en dicho botón, se oscurezca el fondo de mi sitio, como lo hacen los modales de Bootstrap.

Gif de ejemplo

Supongo que puedo lograrlo con JS, pero por desgracia no sabría cómo. Estoy trabajando con Bootstrap 4.

//FAB
    $(document).ready(function() {
      $('.fixed-action-btn').floatingActionButton();
    });
    
    
.primary-color{
  background-color: blue;
}
.fixed-action-btn {
  position: fixed;
  right: 3%;
  bottom: 4%;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 997;
}

.fixed-action-btn.active ul {
  visibility: visible;
  list-style-type: none;
}

.fixed-action-btn.direction-left, .fixed-action-btn.direction-right {
  padding: 0 0 0 15px;
}

.fixed-action-btn.direction-left ul, .fixed-action-btn.direction-right ul {
  text-align: right;
  right: 64px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 100%;
  left: auto;
  /*width 100% only goes to width of button container */
  width: 500px;
}

.fixed-action-btn.direction-left ul li, .fixed-action-btn.direction-right ul li {
  display: inline-block;
  margin: 7.5px 15px 0 0;
}

.fixed-action-btn.direction-right {
  padding: 0 15px 0 0;
}

.fixed-action-btn.direction-right ul {
  text-align: left;
  direction: rtl;
  left: 64px;
  right: auto;
}

.fixed-action-btn.direction-right ul li {
  margin: 7.5px 0 0 15px;
}

.fixed-action-btn.direction-bottom {
  padding: 0 0 15px 0;
}

.fixed-action-btn.direction-bottom ul {
  top: 64px;
  bottom: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.fixed-action-btn.direction-bottom ul li {
  margin: 15px 0 0 0;
}

.fixed-action-btn.toolbar {
  padding: 0;
  height: 56px;
}

.fixed-action-btn.toolbar.active > a i {
  opacity: 0;
}

.fixed-action-btn.toolbar ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.fixed-action-btn.toolbar ul li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: inline-block;
  margin: 0;
  height: 100%;
  -webkit-transition: none;
  transition: none;
}

.fixed-action-btn.toolbar ul li a {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  line-height: 56px;
  z-index: 1;
}

.fixed-action-btn.toolbar ul li a i {
  line-height: inherit;
}

.fixed-action-btn ul {

  right: 15%;
  text-align: center;
  position: absolute;
  bottom: 64px;
  margin: 0;
  visibility: hidden;
}

.fixed-action-btn ul li {
  margin-bottom: 15px;
}

.fixed-action-btn ul a.btn-floating {
  opacity: 0;
}

.fixed-action-btn .fab-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 40px;
  height: 40px;
  background-color: #26a69a;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.btn-floating {
  display: inline-block;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  filter: saturate(8);
  border-radius: 50%;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
  cursor: pointer;
  vertical-align: middle;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn-floating:hover {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
         box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

.btn-floating:before {
  border-radius: 0;
}

.btn-floating.btn-large {
  width: 56px;
  height: 56px;
  padding: 0;
}

.btn-floating.btn-large.halfway-fab {
  bottom: -28px;
}

.btn-floating.btn-large i {
  line-height: 56px;
}

.btn-floating.btn-small {
  width: 32.4px;
  height: 32.4px;
}

.btn-floating.btn-small.halfway-fab {
  bottom: -16.2px;
}

.btn-floating.btn-small i {
  line-height: 32.4px;
}

.btn-floating.halfway-fab {
  position: absolute;
  right: 24px;
  bottom: -20px;
}

.btn-floating.halfway-fab.left {
  right: auto;
  left: 24px;
}

.btn-floating i {
  width: inherit;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  line-height: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<body>
  <div class="fixed-action-btn">
    <a class="btn-floating btn-large primary-color">
      <i class="large material-icons">share</i>
    </a>
    <ul>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-twitter"></i></a></li>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
      <li><a href="#" class="btn-floating primary-color"><i class="fab fa-whatsapp"></i></a></li>
    </ul>
  </div>
  </body>

2
  • Mira estoy probando así en el celu porque no tengo una compu a mano, en materialize vos inicias el floating con con el siguiente comando $('.fixed-action-btn').floatingActionButton(); lo que vos podes usar es $('.fixed-action-btn').hover(function(){ // PONER ACA EL CAMBIO DE DATOS // }); si adentro de la funcion hover le pones un backgound black y una opacidad de 0.5 al hacer hover en el boton lo hace, ahora no encuentro como sacarlo al momendo de dejar de hacer hover, fijate si te sirve algo de eso o buscandolo de esa forma
    – Juan
    el 8 ene. 2019 a las 15:55
  • Muchas gracias por tu comentario Juan, es justamente la idea que tengo pero no se todavía muy bien cómo plantearla correctamente.
    – EMCode
    el 8 ene. 2019 a las 19:21

2 respuestas 2

6

Una forma es crear una overlay, que es una capa que cubre una sección del documento; en este caso, todo el documento. Esta overlay se mostrará junto con las opciones y se ocultará también junto con ellas.

Dado que este overlay será absoluto, es probable que en algunos casos "tape" las opciones; en este caso, debes darle un z-index mayor a estas para que siempre se muestren "encima" de esta.

Ejemplo

const button = document.querySelector('#reactions-btn')
const overlay = document.querySelector('.overlay')

function areReactionsVisible(reactionsList) {
  return reactionsList = reactionsList.classList.contains('open')
}

button.addEventListener('click', function () {
  const reactionsList = this.children[1]
  reactionsList.classList.toggle('open')
  overlay.classList.toggle('visible')
})
body {
  align-items: center;
  background-color: #333;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.container {
  background-color: #fff;
  box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  height: 640px;
  position: relative;
  width: 360px;
}
.container .top-header {
  align-items: center;
  background-color: #2980b9;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  display: flex;
  flex: 0 0 60px;
  justify-content: space-between;
  padding: 0 20px;
}
.container .top-header .top-header__menu-btn {
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 30px;
  padding: 0;
  text-align: center;
  width: 30px;
}
.container .main-content {
  flex: 1;
}
.container .main-footer {
  align-items: center;
  border-top: 1px solid #e8e8e8;
  background-color: #f4f4f4;
  display: flex;
  flex: 0 0 60px;
  justify-content: flex-end;
  padding: 0 20px;
}
.container .main-footer .main-footer__options-btn {
  background-color: transparent;
  border: none;
  color: #d53400;
  cursor: pointer;
  outline: none;
  position: relative;
  width: 30px;
}
.container .main-footer .main-footer__options-btn ul {
  bottom: 0px;
  right: -1px;
  list-style: none;
  opacity: 0;
  outline: none;
  padding: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 250ms ease, bottom 200ms ease;
}
.container .main-footer .main-footer__options-btn ul.open {
  bottom: 30px;
  opacity: 1;
}
.container .main-footer .main-footer__options-btn ul li {
  cursor: pointer;
  display: block;
  margin: 10px 0;
}
.container .main-footer .main-footer__options-btn ul li img {
  width: 30px;
}
.container .overlay {
  background-color: rgba(0, 0, 0, 0.75);
  height: 100%;
  opacity: 0;
  position: absolute;
  transition: opacity 250ms ease;
  width: 100%;
}
.container .overlay.visible {
  opacity: 1;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<section class="container">
  <div class="overlay"></div>
  <header class="top-header">
    <div></div>
    <button class="top-header__menu-btn">
      <i class="material-icons">menu</i>
    </button>
  </header>
  <article class="main-content">
    
  </article>
  <footer class="main-footer">
    <button class="main-footer__options-btn" id="reactions-btn">
      <i class="material-icons">favorite</i>
      <ul>
        <li><img src="https://cdn.worldvectorlogo.com/logos/facebook-haha.svg" alt="haha"></li>
        <li><img src="https://cdn.worldvectorlogo.com/logos/facebook-love.svg" alt="love"></li>
        <li><img src="https://cdn.worldvectorlogo.com/logos/facebook-wow.svg" alt="surprise"></li>
        <li><img src="https://cdn.worldvectorlogo.com/logos/facebook-angry.svg" alt="angry"></li>
        <li><img src="https://cdn.worldvectorlogo.com/logos/facebook-sad.svg" alt="sad"></li>
      </ul>
    </button>
  </footer>
</section>

3
  • 2
    Usar overlays es la respuesta correcta para esto que se pretende hacer pero los overlays deben ser hijos inmediatos del body para evitar que algun estilo heredado o de un elemento padre como overflow generen bugs visuales. Si las opciones son creadas como elementos hijos del overlay nunca se solaparán y no habrá necesidad de usar z-index. Angular Material lo hace exactamente de esa forma.
    – devconcept
    el 8 ene. 2019 a las 17:31
  • Gracias por tu respuesta Gugadev, estoy aplicando tu idea y tratando de adaptarla a mi código, tengo problemas para posicionar el overlay, no cubre al 100% el sitio en vertical. Ya usé z-index en el FAB.
    – EMCode
    el 8 ene. 2019 a las 19:19
  • 2
    Gracias por la anotación, @devconcept. @AMCode, pon el overlay como hijo directo del body y dale un position: fixed; top: 0; left: 0; height: 100vh; width: 100%;. Esto hará que ocupe todo el viewport del navegador.
    – gugadev
    el 9 ene. 2019 a las 1:46
1

Existe la función hover() en Jquery que te permite reaccionar a cuando el ratón entra o sale de un elemento. En tu caso, le he asociado dicha función al elemento .fixed-action-btn para que al entrar en él le cambie el color de fondo al body. La propiedad CSS que tendrías que cambiar en tu caso sería opacity para cambiarla del valor 1 al 0.5, por ejemplo.

Al no tener contenido opté por cambiar el color para que se viese bien como funcionaba.

//FAB
    $(document).ready(function() {
      $('.fixed-action-btn').floatingActionButton();
      
      $('.fixed-action-btn').hover(
        function () {
           $('body').css('background-color', 'red');
        }, 
        function () {
           $('body').css('background-color', 'white');
         }
      );
      
    });
.primary-color{
  background-color: blue;
}
.fixed-action-btn {
  position: fixed;
  right: 3%;
  bottom: 4%;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 997;
}

.fixed-action-btn.active ul {
  visibility: visible;
  list-style-type: none;
}

.fixed-action-btn.direction-left, .fixed-action-btn.direction-right {
  padding: 0 0 0 15px;
}

.fixed-action-btn.direction-left ul, .fixed-action-btn.direction-right ul {
  text-align: right;
  right: 64px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 100%;
  left: auto;
  /*width 100% only goes to width of button container */
  width: 500px;
}

.fixed-action-btn.direction-left ul li, .fixed-action-btn.direction-right ul li {
  display: inline-block;
  margin: 7.5px 15px 0 0;
}

.fixed-action-btn.direction-right {
  padding: 0 15px 0 0;
}

.fixed-action-btn.direction-right ul {
  text-align: left;
  direction: rtl;
  left: 64px;
  right: auto;
}

.fixed-action-btn.direction-right ul li {
  margin: 7.5px 0 0 15px;
}

.fixed-action-btn.direction-bottom {
  padding: 0 0 15px 0;
}

.fixed-action-btn.direction-bottom ul {
  top: 64px;
  bottom: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.fixed-action-btn.direction-bottom ul li {
  margin: 15px 0 0 0;
}

.fixed-action-btn.toolbar {
  padding: 0;
  height: 56px;
}

.fixed-action-btn.toolbar.active > a i {
  opacity: 0;
}

.fixed-action-btn.toolbar ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.fixed-action-btn.toolbar ul li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: inline-block;
  margin: 0;
  height: 100%;
  -webkit-transition: none;
  transition: none;
}

.fixed-action-btn.toolbar ul li a {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
  line-height: 56px;
  z-index: 1;
}

.fixed-action-btn.toolbar ul li a i {
  line-height: inherit;
}

.fixed-action-btn ul {

  right: 15%;
  text-align: center;
  position: absolute;
  bottom: 64px;
  margin: 0;
  visibility: hidden;
}

.fixed-action-btn ul li {
  margin-bottom: 15px;
}

.fixed-action-btn ul a.btn-floating {
  opacity: 0;
}

.fixed-action-btn .fab-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 40px;
  height: 40px;
  background-color: #26a69a;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
}

.btn-floating {
  display: inline-block;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  filter: saturate(8);
  border-radius: 50%;
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
  cursor: pointer;
  vertical-align: middle;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.btn-floating:hover {
  -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
         box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

.btn-floating:before {
  border-radius: 0;
}

.btn-floating.btn-large {
  width: 56px;
  height: 56px;
  padding: 0;
}

.btn-floating.btn-large.halfway-fab {
  bottom: -28px;
}

.btn-floating.btn-large i {
  line-height: 56px;
}

.btn-floating.btn-small {
  width: 32.4px;
  height: 32.4px;
}

.btn-floating.btn-small.halfway-fab {
  bottom: -16.2px;
}

.btn-floating.btn-small i {
  line-height: 32.4px;
}

.btn-floating.halfway-fab {
  position: absolute;
  right: 24px;
  bottom: -20px;
}

.btn-floating.halfway-fab.left {
  right: auto;
  left: 24px;
}

.btn-floating i {
  width: inherit;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-size: 1.6rem;
  line-height: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<body>
  <div class="fixed-action-btn">
    <a class="btn-floating btn-large primary-color">
      <i class="large material-icons">share</i>
    </a>
    <ul>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-twitter"></i></a></li>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-google-plus-g"></i></a></li>
      <li><a href="#" class="btn-floating primary-color" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
      <li><a href="#" class="btn-floating primary-color"><i class="fab fa-whatsapp"></i></a></li>
    </ul>
  </div>
  </body>

4
  • Mira vos, era lo que le habia puesto como comentario solo que no sabia que poniendo otra funcion lo tomaba como cuando salis del hover, me lo guardo porque tambien me sirve.
    – Juan
    el 8 ene. 2019 a las 16:09
  • Es útil para ahorrarte el usar mouseenter() y mouseout().
    – phpMyGuel
    el 8 ene. 2019 a las 16:11
  • Hola Miguel, gracias por tu respuesta, funciona en principio, el problema que tengo es que solo se aplica el cambio al "fondo" de mi página. No se aplica en botones, navbars o footers, tampoco en imágenes :c
    – EMCode
    el 8 ene. 2019 a las 18:36
  • 1
    Entonces lo que necesitas es lo que te ha comentado el compañero @gugadev, tendrías que desplegar junto con el menú un elemento que cubra el 100% de la pantalla y a ese darle un background con opacity para que "difumine" toda tu página excepto el menú que despliegas.
    – phpMyGuel
    el 8 ene. 2019 a las 19:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.