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

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 更改 'opacity' 和 'top' 屬性時，需要一些時間由 'transition' 屬性定義。

您可以使用它制作簡單的動畫。

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

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

問題描述

1 個解決方案

解決方案1
0 2017-02-07 06:56:47

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

問題描述

1 個解決方案

解決方案1 0 2017-02-07 06:56:47

解決方案1
0 2017-02-07 06:56:47