Question

我尝试使用 vue.js 在我的模态后面添加模糊面板但问题是modal-mask内容已嵌套因此，为了添加filter: blur()属性，它会模糊一切。

现在我只能在背景中添加黑色调。

jsfiddle： https://jsfiddle.net/EricTalv/2eed5qjo/26/

HTML

  <div id="content-container">
    <div id="wrapper">
      <ul id="flex-container">
        <li class="flex-item">
          <div id="list-area"></div>
        </li>
        <li class="flex-item">
          <div id="img-desc-container">
            <div class="image-area">
              <img src="http://dukes-lancaster.org/wp-content/uploads/2014/11/placeholder.jpg">
            </div>
            <div class="description-area"></div>
          </div>
        </li>
      </ul>
      <button class="modal-close" @click="$emit('close')">Close</button>
    </div>
  </div>

</div>

CSS

/ * BLUR PANEL * /

#modal-mask {
   position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    display: table;
    transition: opacity .3s ease;
}

Answer 1

您需要将内容移动到单独的容器中并切换模糊类

https://jsfiddle.net/2eed5qjo/27/

<div :class="{'blur-content': showModal}">
  ... your content ...
</div>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" @close="showModal = false">
</modal>

然后添加像这样的css类

.blur-content{
  filter: blur(5px); 
}

将vue模态蒙版设置为模糊

1 个答案: