彈出div的縮放背景

Question

我很難設置包含圖像的彈出窗口。 我有一個普通的 html 文檔，我嘗試通過單擊 div 在屏幕上打開圖像。

<body>
    <div class="popup" onclick="myFunction()"><img src="sample.png"</img>
    <span class="popupcontent" id="myPopup"></span>
  </div>
        <script>
        // When the user clicks on <div>, open the popup
        function myFunction() {
          var popup = document.getElementById("myPopup");
          popup.classList.toggle("show");
        }
        </script>
</body>

CSS 規則也很簡單：

.popup {
  position: fixed;
  margin:auto;
  top:0%;
  display:block;
  cursor: pointer;
  border-radius:25px;
}
.popup .popupcontent {
  width:90%;
  margin:auto;:
  position: fixed;
  visibility: hidden;
  z-index: 9999;
  background-image: url('image.png');
  background-repeat: no-repeat;
  background-size: contain;
}
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

但是，當我單擊 div“彈出窗口”時，什么也沒有發生。 我希望彈出窗口顯示在包含定義的背景圖像的屏幕中間。 這種方法有什么問題？

Answer 1

當您編寫“popupcontent”時，您錯過了一條規則：

這是錯誤的： margin:aut;:

改為這樣做： margin: auto;

彈出div的縮放背景

問題描述

1 個解決方案

解決方案1
-1 2023-01-10 10:51:04

彈出div的縮放背景

問題描述

1 個解決方案

解決方案1 -1 2023-01-10 10:51:04

解決方案1
-1 2023-01-10 10:51:04