如何让设置为visibility:hidden的隐藏元素重新正常显示

问题根本原因 #

你使用了两个完全无关的CSS属性控制元素显隐，同时存在属性值赋值错误的问题：

• 隐藏逻辑修改的是visibility属性，将其设置为hidden
• 显示逻辑错误地修改了display属性，且给display赋了非法值visible（该值是visibility的合法取值，不属于display）
  两种操作完全不匹配，元素的visibility属性会一直保持hidden状态，自然无法重新显示。

可行解决方案 #

方案1：统一使用visibility属性控制显隐（改动最小） #

只需要修改模态框的显示逻辑，把修改display改为修改visibility即可：

<div id="create_phase{{ forloop.counter }}" class="w3-modal" onclick="this.style.visibility='visible'">

隐藏逻辑不需要改动即可正常生效。

方案2：统一使用display属性控制显隐（符合W3.CSS原生规范） #

W3.CSS框架的模态框默认使用display属性控制显隐，你可以修改隐藏逻辑适配框架默认规则：

1. 先修正显示逻辑的display属性值为合法值：

<div id="create_phase{{ forloop.counter }}" class="w3-modal" onclick="this.style.display='block'">

2. 再修改隐藏逻辑为修改display属性：

<a onclick="document.getElementById('create_phase{{ forloop.counter }}').style.display = 'none'">X</a>

可选优化建议 #

你当前把点击显示事件绑定在模态框容器上，点击模态框内部的内容区域也会触发该事件，可能造成预期外的显隐操作，可以增加点击目标判断，只有点击容器本身的时候才触发显示逻辑：

<div id="create_phase{{ forloop.counter }}" class="w3-modal" onclick="if(event.target == this) this.style.visibility='visible'">

内容的提问来源于stack exchange，提问作者searcher__dm01