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

单击浮动按钮时背景变暗

772

我有一个浮动按钮，我可以选择共享我的页面，单击它会显示这样做的替代方案。

我想要实现的是单击这样的按钮会使我的网站的背景变暗，就像 Bootstrap 的模态一样。

我想我可以用 JS 实现它，但不幸的是我不知道怎么做。我正在使用 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

一种方法是创建一个覆盖层，它是覆盖文档一部分的层；在这种情况下，整个文档。此叠加层将与选项一起显示，也将与它们一起隐藏。

由于此覆盖将是绝对的，因此在某些情况下可能会“覆盖”选项；在这种情况下，您应该给z-index它们一个更高的值，以便它们始终显示在它的“顶部”。

例子

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

Jqueryhover()中有一个函数可以让您在鼠标进入或退出元素时做出反应。在您的情况下，我已将此功能与元素相关联，以便在输入它时，. 例如，您必须在您的情况下更改的CSS属性是将其从值1更改为0.5。.fixed-action-btnbodyopacity

没有内容，我选择更改颜色，以便可以看到它是如何工作的。

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

单击浮动按钮时背景变暗

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?