英文:
Stop closing modal when pressing outside modal
问题
我正在尝试创建一个弹出式模态框，在这个模态框中，我不希望能够通过点击模态窗口外部来关闭模态框。我已经搜索并尝试了不同的解决方案，包括使用背景遮罩，但似乎都没有奏效。感谢任何帮助！我用于模态框的代码如下：
<template>
<div>
<transition name="modal">
<div v-if="isOpen">
<div class="overlay" @click.self="isOpen = false;">
<div class="modal">
<h1>模态框标题</h1>
<p>这是我使用 vue.js 创建的第一个模态框</p>
</div>
</div>
</div>
</transition>
<button @click="isOpen = !isOpen;">
{{ isOpen ? "关闭" : "打开" }} 模态框
</button>
</div>
</template>
<script>
export default {
data: function() {
return {
isOpen: false
};
}
};
</script>
希望这对你有所帮助！
英文:
I'm trying to make a popup modal where I don't want to be able to close the modal by clicking outside the modal window. I've searched and tried different solutions with backdrop but nothing seems to work. Would appreciate any help! The code I have for the modal is:
<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>
答案1
得分: 1
点击事件@click被放置在覆盖层上，我推测覆盖层位于模态框后方。这部分代码在点击覆盖层时关闭模态框。
@click.self="isOpen = false;"
只需移除上述代码。您可以将其放置在其他组件上，例如关闭按钮、按钮，或以任何您希望的方式触发关闭操作。
英文:
The @click event is placed on the overlay, which I presume is positioned behind the modal. This part closes the modal when clicking on the overlay layer.
@click.self="isOpen = false;"
Just remove the code above. You can place it on another component; like a closing cross, button, or trigger the closing in any way you want.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论