Question

我想显示一个项目已添加到购物车的自定义消息框。我尝试过使用Bootstrap模式，但是想要使用CSS。消息框应该从标题中滑动并显示消息然后消失（类似于Bootstrap模态）。

<div>
<button type="button" id="notifyProductName" ></button>
</div>

<script>
var display = document.getElementById("notifyProductName");
  display.innerHTML = productName + " was added to cart";
</script>

Answer 1

我不确定，但是如果你正在寻找简单的CSS动画。

如果你认为你可以使用'过渡'属性。

请尝试使用以下HTML代码：

<body>
    <div id="popup-msg">
      <h4>Product Notification</h4>
      <button type="button" id="notifyProductName">OK</button>
    </div>

    <button onclick="popupMsg()">pop</button>

    <script>
    var popupMsg = function() {
        document.getElementById("popup-msg").style['opacity'] = '1';
        document.getElementById("popup-msg").style['top'] = '50px';
    }
    </script>
</body>

和CSS：

#popup-msg {
  position: absolute;
  top: -200px;
  left: calc(50% - 200px);
  width: 400px;
  height: 200px;
  padding: 10px;
  border-style: solid;
  border-color: lightgray;
  border-width: 1px;
  border-radius: 10px;
  background-color: white;
  box-shadow: 5px 5px 10px #AAAAAA;
  opacity: 0;
  transition: 0.25s;
}

当您从Javascript更改“不透明度”和“顶部”属性时，“转换”属性需要一些时间。

您可以使用此功能制作简单的动画。

这是我的JS小提琴：https://jsfiddle.net/wiany11/07gks6x9/

使用CSS显示自定义消息 - Bootstrap模式的替代方法

1 个答案: