时间戳

首页 > 解决方案 > 将模式中的图像选择应用于页面背景

javascript - 将模式中的图像选择应用于页面背景

问题描述

我希望有人以前做过这个并有一些指导。

我在一个网站上使用引导程序，现在我有一个工作模式，可以加载一组图片，目前是 2 个。这工作正常，我将它们与锚标签链接。

但是，我正在尝试找到选择图像的最佳方法，一旦用户单击它，将其应用于容器的背景图像 css。

所以现在我只有一个背景的测试图像，但基本上我想从模态中选择一个图像来创建一个 bgImg 变量，可以这么说，并将它实时应用于我的容器 div 的背景。所以这应该应用一些javascript，但我真的不知道具体使用什么。或者就此而言，如何从选择中创建一个变量，然后将其应用于 CSS。

基本上，如果我从模式中选择图像 1，模式应该关闭并且图像的 URL 现在应该代替背景图像 url 的 CSS，如果这有意义的话

相关背景的 CSS：

.my-container>.middle {
  flex-grow: 1;
  padding:30px;
  background-image: /*this would be the bgImg for the href*/;
  background-size: cover;
}

模态的 HTML 和我想应用于背景的图像

选择页面背景

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Choose an image:</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <a href="bgImg"><img style="width: 200px; height: 200px;" src="images/bg_orange.svg"></a>
        <a href="bgImg"><img style="width: 200px; height: 200px;" src="images/bg_green.svg"></a>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

更新：

添加JS

 <script type="text/javascript">
 const images = document.querySelectorAll('some-image-selector');
 images.forEach(img => img.addEventListener('click', setBackground));

 function setBackground(e) {
  const container = document.querySelector('.my-container > .middle')
  container.style.background = `url(${e.target.src}) center center no-repeat`
 };

 </script>

标签： javascripthtmlcssbootstrap-4

解决方案

因此，要使这项工作正常进行，您需要为每个图像添加一个单击事件侦听器。

const images = document.querySelectorAll('some-image-selector')
images.forEach(img => img.addEventListener('click', setBackground))

类似的东西^^

然后在里面setBackground，更新css

function setBackground(e) {
  const container = document.querySelector('.my-container > .middle')
  container.style.background = `url(${e.target.src}) center center no-repeat`
}

推荐阅读