当另一个模态模态在其中打开时模糊背景模态答案

【问题标题】：blur the background modal when another modal modal is opened with in it当另一个模态模态在其中打开时模糊背景模态
【发布时间】：2019-02-23 15:30:51
【问题描述】：

我有一个带有两个模态的反应组件，例如

render{
    return(
           <div>
              <ParentModal>
              <ChildModal/>
              </ParentModal>
           </div>

)

}

尝试了一些背景 css 和模糊，其中我可以看到两个模态都变得模糊，但我只想在子模态打开时变得模糊

【问题讨论】：

我们需要更多你的代码。无论如何，在呈现两个 Modal 的组件状态中，你应该保留一个属性 isBlurred，然后将其作为道具传递给 ChildModal。然后，在ChildModal 中，您可以根据props.isBlurred 值设置内联CSS。

标签： javascript css reactjs bootstrap-modal

【解决方案1】：

CSS filter:blur 影响所有子级。您将需要这样的东西：

render{
return(
       <div>
          <CommonParent>
              <ParentModal/>
              <ChildModal/>
          </CommonParent>
       </div>

)}

然后你只能模糊父项

【讨论】：