时间戳

首页 > 解决方案 > 将 vue 模态掩码设置为模糊

html - 将 vue 模态掩码设置为模糊

问题描述

我正在尝试使用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;
}

标签： htmlcssvue.js

解决方案

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

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

推荐阅读