怎样实现POPUp

博客展示了一段JavaScript代码,通过创建两个popup窗口,定义了一个名为zdzhuo的函数,在函数中设置了两个popup窗口的样式和内容,并通过点击按钮触发该函数来显示这两个窗口。
<script>
var popup1 = window.createPopup();
var window2 = popup1.document.parentWindow;
var popup2 = window2.createPopup();
function zdzhuo() {
var pop1Body = popup1.document.body;
pop1Body.style.backgroundColor = "red";
pop1Body.style.border="solid black 1px";
pop1Body.innerHTML = "你有新消息";
popup1.show(20, 50, 300, 300, document.body);
var pop2Body = popup2.document.body;
pop2Body.style.backgroundColor = "blue";
popup2.show(400, 100, 300, 200, document.body);
}
</script>
<button onclick="zdzhuo()">两个popup</button>
目前给定的引用内容中未涉及在 UniApp 中使用 iframe 实现 popup 的方法相关信息。不过,下面为你介绍在 UniApp 里利用 iframe 实现 popup 的一般步骤与示例代码。 ### 实现思路 1. **创建 Popup 组件**:可以使用 UniApp 自带的 `<view>` 组件来模拟 popup 的样式。 2. **引入 iframe**:在 popup 组件内部引入 `<web-view>` 组件,`<web-view>` 可加载网页,起到类似 iframe 的作用。 3. **控制 Popup 显示与隐藏**:通过数据绑定和事件处理来控制 popup 的显示与隐藏。 ### 示例代码 ```vue <template> <view> <!-- 触发显示 popup 的按钮 --> <button @click="showPopup = true">显示 Popup</button> <!-- Popup 组件 --> <view v-if="showPopup" class="popup"> <view class="popup-content"> <!-- 使用 web-view 加载网页 --> <web-view :src="iframeSrc"></web-view> <button @click="showPopup = false">关闭 Popup</button> </view> </view> </view> </template> <script> export default { data() { return { showPopup: false, iframeSrc: 'https://www.example.com' // 要加载的网页地址 }; } }; </script> <style> .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .popup-content { background-color: white; width: 80%; height: 80%; padding: 20px; } </style> ``` ### 代码解释 - **模板部分**:包含一个按钮用于触发显示 popup,以及一个 `<web-view>` 组件用于加载网页。 - **脚本部分**:定义了 `showPopup` 变量用于控制 popup 的显示与隐藏,以及 `iframeSrc` 变量用于指定要加载的网页地址。 - **样式部分**:使用 CSS 样式来实现 popup 的遮罩层和内容区域。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值