What is a promise in Javascript?

Question

EMCode

Asked: 2020-01-09 06:59:40 +0800 CST 2020-01-09 06:59:40 +0800 CST 2020-01-09 06:59:40 +0800 CST

Darken background when clicking floating button

772

I have a floating button with which I give the option to share my page, clicking on it displays the alternatives to do so.

What I want to achieve is that clicking such a button will darken the background of my site, like Bootstrap's modals do.

I guess I can achieve it with JS, but unfortunately I wouldn't know how. I am working with 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 Answers

Voted

gugadev · Answer 1 · 2020-01-09T08:21:38+08:00

One way is to create an overlay , which is a layer that covers a section of the document; in this case, the entire document. This overlay will be shown along with the options and will also be hidden along with them.

Since this overlay will be absolute, it is likely to "cover" the options in some cases; in this case, you should give z-indexthese a higher so that they always display "on top" of it.

Example

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>

phpMyGuel · Answer 2 · 2020-01-09T08:02:31+08:00

There is the function hover()in Jquery that allows you to react to when the mouse enters or exits an element. In your case, I have associated this function to the element .fixed-action-btnso that when entering it, the background color of the body. The CSS property that you would have to change in your case would be opacityto change it from the value 1 to 0.5 , for example.

Having no content, I chose to change the color so that it could be seen how it worked.

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

Darken background when clicking floating button

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?