当模态处于活动状态时，传单贴图仍然存在。为什么？

Question

我正在使用Leaflet.js制作地图的网络应用，Vue.js来管理应用，以及Bulma用于CSS。

Bulma has a "modal" element，当其类设置为init_sims(replace=True)时，它应出现在其他所有内容之前。我有这个工作，除了地图不会像页面的其余部分一样淡入背景。

我对模态知之甚少。有没有人知道为什么地图会在其他一切消失的情况下仍然可见？谢谢！

Answer 1

如果没有看到这个，我只能猜测。但很可能是模态，模态背后的暗覆盖以及地图都将其position设置为absolute或relative，并将一个数字分配给他们的css z-index 。

地图的z-index可能高于模态或背景叠加层的z-index，导致它出现在前面。如果是这种情况，解决方案是修改export default class extends Component { constructor(props) { super(props) this.state = { searchTerm: ''} this.handleChange = this.handleChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) } handleChange = (event) => { this.setState({ searchTerm: event.target.value }) console.log('event.target.value') console.log(event.target.value) console.log('this.searchTerm') console.log(this.searchTerm) } handleSubmit = () => { console.log('Button Clicked') console.log(this.searchTerm) } render() { return ( <form onSubmit={this.handleSubmit}> <label> Search: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ) } } 值以使它们按正确顺序排列。