APICloud 自定义弹窗实现

本文介绍如何在APICloud项目中创建自定义弹窗,通过frame实现全屏半透明背景,并在其中添加自定义内容。提供了一个简单的两步实现方案,包括设置全屏frame和监听事件关闭弹窗的示例代码,点击弹窗外区域可关闭弹窗。
摘要由CSDN通过智能技术生成

  在大家的项目里应该会出现一些弹窗选择,你可能用了 confirm、prompt,也可能用了 dialogBox,使用这些模块总是不错的,但也许其样式满足不了你的需求。
在这我给大家分享一个简单的弹窗实现,主要利用 frame 实现。

  先上个效果图:
在这里插入图片描述

  点击遮照部位可以关闭弹窗。

  这个实现起来非常简单,总共就两个步骤:
  第一步:打开一个全屏的 frame,并设置半透明

api.openFrame({
                name: 'dialog',
                url: './html/dialog.html',
                rect: {
                        x:0,
                        y:0,
                        w:api.winWidth,
                        h:api.winHeight
                },
                bgColor: 'rgba(0,0,0,0.6)',
                        bounces: false
        });

  第二步:在打开的 frame 里,设置一个白底的 div,里面可以自定义任何你想要的东西,比如 alert 的确定按钮什么的。
  下面的 js 代码主要实现点击 div 外,将弹窗关闭的效果:

<
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值