如何在 vue 中创建模态弹出窗口
Posted
技术标签:
【中文标题】如何在 vue 中创建模态弹出窗口【英文标题】:How to create a modal popup in vue 【发布时间】:2021-10-17 22:25:14 【问题描述】:我有一个模式弹出窗口,一旦我单击打开模式按钮,它就会显示一些文本,但是当单击按钮时,页面变灰但没有显示弹出窗口,我不确定为什么会发生这种情况我是 VUE 的新手。任何帮助将不胜感激。
查看页面的代码如下。
<template>
<div>
<transition name="modal">
<div v-if="isOpen">
<div class="overlay" @click.self="isOpen = false;">
<div class="modal">
<h1>Modal heading</h1>
<p>This my first modal using vue.js</p>
</div>
</div>
</div>
</transition>
<button @click="isOpen = !isOpen;">
isOpen ? "Close" : "Open" modal
</button>
</div>
</template>
<script>
export default
data: function()
return
isOpen: false
;
;
</script>
<style scoped>
.modal
width: 500px;
margin: 0px auto;
padding: 20px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px 3px;
transition: all 0.2s ease-in;
font-family: Helvetica, Arial, sans-serif;
.fadeIn-enter
opacity: 0;
.fadeIn-leave-active
opacity: 0;
transition: all 0.2s step-end;
.fadeIn-enter .modal,
.fadeIn-leave-active.modal
transform: scale(1.1);
button
padding: 7px;
margin-top: 10px;
background-color: green;
color: white;
font-size: 1.1rem;
.overlay
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #00000094;
z-index: 999;
transition: opacity 0.2s ease;
</style>
【问题讨论】:
【参考方案1】:正如您从下面的 sn-p 中看到的那样,模态正在工作。 也许其他一些 css 会覆盖它
new Vue(
el: '#app',
data: function()
return
isOpen: false
;
)
.modal
width: 500px;
margin: 0px auto;
padding: 20px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px 3px;
transition: all 0.2s ease-in;
font-family: Helvetica, Arial, sans-serif;
.fadeIn-enter
opacity: 0;
.fadeIn-leave-active
opacity: 0;
transition: all 0.2s step-end;
.fadeIn-enter .modal,
.fadeIn-leave-active.modal
transform: scale(1.1);
button
padding: 7px;
margin-top: 10px;
background-color: green;
color: white;
font-size: 1.1rem;
.overlay
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #00000094;
z-index: 999;
transition: opacity 0.2s ease;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<transition name="modal">
<div v-if="isOpen">
<div class="overlay" @click.self="isOpen = false;">
<div class="modal">
<h1>Modal heading</h1>
<p>This my first modal using vue.js</p>
</div>
</div>
</div>
</transition>
<button @click="isOpen = !isOpen;">
isOpen ? "Close" : "Open" modal
</button>
</div>
【讨论】:
【参考方案2】:您的叠加层具有较高的 z-imdex。因此,它也覆盖了您的模态内容。将高于 999 的相对位置和 z-imdex 添加到 .模态的,它应该可以工作。
【讨论】:
以上是关于如何在 vue 中创建模态弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Python 函数中创建简单的 PyQt 弹出窗口并在其末尾关闭?