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.
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>