弹框点击按钮

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮,显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了\"确定\"按钮!";
	}
	else{
		x="你按下了\"取消\"按钮!";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

 confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

 

如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。

在用户点击确定按钮或取消按钮把对话框关闭之前,它将阻止用户对浏览器的所有输入。在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。

### Vue2 中实现点击按钮后显示 在 Vue2 中,可以通过多种方式来实现在点击按钮之后展示的效果。下面提供一种基于组件的方式来进行此功能开发。 #### 创建组件 首先创建一个名为 `Popup.vue` 的新文件作为组件: ```html <template> <transition name="fade"> <div v-if="isVisible" class="popup-overlay"> <div class="popup-content"> {{ message }} <button @click="close">关闭</button> </div> </div> </transition> </template> <script> export default { data() { return { isVisible: false, message: '' } }, methods: { open(msg) { this.message = msg; this.isVisible = true; }, close() { this.isVisible = false; } } } </script> <style scoped> .popup-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, .5); } .popup-content { width: 300px; margin: auto; text-align: center; padding: 20px; border-radius: 8px; background-color: white; position: absolute; top: 50%; transform: translateY(-50%); } .fade-enter-active, .fade-leave-active { transition: opacity .5s ease; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> ``` 上述代码定义了一个简单的出层,并设置了淡入/淡出动画效果[^1]。 #### 使用组件 接着,在父级组件中引入并注册这个组件,同时编写逻辑用于控制其可见性状态变化: ```html <template> <div id="app"> <button @click="showPopup">打开窗</button> <!-- 注册子组件 --> <popup ref="myPopup"></popup> </div> </template> <script> import Popup from './components/Popup'; export default { components: { Popup }, methods: { showPopup() { const popupComponent = this.$refs.myPopup; // 调用子组件的方法以显示窗 popupComponent.open('这是一个测试消息'); } } }; </script> ``` 这里展示了如何通过 `$refs` 来访问子组件实例及其公开方法,从而触发的显示行为。 #### 总结 以上就是在 Vue2 中利用自定义组件实现点击按钮后显示的一种常见做法。这种方式不仅易于维护还便于扩展更多特性,比如国际化支持或者动态奖励机制等[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值