Question

有一些不在我所在地区的东西。

Basiclly我需要一个变形为表单的FAB按钮，以便新成员可以将一个家庭成员添加到他们的个人资料中。例如，假设您的家人有以下情况。

你
合作伙伴
Kid 1
Kid 2

现在，由于您已添加了自己的帐户，我们需要添加您的合作伙伴（如果他们没有帐户），我们点击按钮并展开+图标，以显示包含用户个人资料的表单图像（上传图像 - +按钮然后获取您上传的图像并将该图像放入该圆圈，然后在其旁边创建一个带有新ID的新+按钮）

每次用户点击+按钮时，它都会使用相同的表单。

这是我到目前为止所做的，请注意，每个按钮没有单独的表格。

我的问题是如何在每次单击+按钮的情况下将其从自动创建新表单和+按钮中转换出来？

https://codepen.io/russellharrower/pen/rzxLRj

HTML

<!-- on Morph FAB Display -->
<div class="fixed-action-btn">
  <div id="overlay" class="blue-grey hidden">  
    DEPENDING ON IF IT IS THE ADD BUTTON OR A IMAGE OF THEIR KID A DIFFENT FORM SHOULD SHOW.
  </div>
  <div class="btn-floating btn-large blue waves-effect waves-light">
    <img src="https://ipet.xyz/template/images/russellharrower.jpg"/>
  </div>
  <div class="btn-floating btn-large blue waves-effect waves-light">
    <i class="material-icons">
    add
  </i>
  </div>
</div>

CSS

  body {
  overflow: hidden;
}
img {
    max-width: 100%;
    max-height: 100%;
}

.fixed-action-btn {
  position:absolute;
  top:3%;
  left: 25%;
  right:25%;
  margin:0 auto !important;
  text-align:center;
  padding: 0;
  #overlay {
    position: absolute;
    text-align:center;
    transform-origin: center center;
    transition: 0.5s ease;
    &.hidden {
      display:none;
      height: 55px;
      width: 55px;
      border-radius: 100%;
      transform: scale(1);
    }
    &.visible {
      // top: 0;
      // left: 20;
      // right: 0;
      // bottom: 0;
      height: 300px;
      color:#FFF;
      text-align:left;
      width: 300px;
      border-radius: 0;
      transform: scale(20);
    }
    h2 {
      position: fixed;
      transform: scale(1) !important;
      top: 100px;
    }
  }
}
#form {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  display: none;
  // transform: translateY(200px);
  // display: none;
  z-index: 1000;
  transition: 0.5s ease;

  .btn-floating.red {
    display: block;
  }
}

JS

    $('.fixed-action-btn').click(function () {
  var morphFAB = $('#overlay');
  morphFAB.toggleClass('visible hidden');
  if (morphFAB.hasClass('visible')) {
    $('#form').addClass('animated slideInUp');
  }else {
    $('#form').removeClass('animated slideInUp');
  }
})

MDL FAB按钮展开

0 个答案: