html - 将vue模态蒙版设置为模糊

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
/ *蓝色面板* /

#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); 
}