ElementPlus使用多级弹窗(Dialog)出现蒙版遮罩问题

场景:创建考试题目弹加窗中,点击增考题按钮,弹出增加考题弹框。因此这属于多级弹窗(使用的是Dialog),当出现第一级弹窗时,可以正常关闭开启;当出现第二级弹窗后,第二级弹窗打开后就无法关闭,很明显是出现了蒙版遮罩问题。

效果演示:点击添加考题按钮后,第二级弹框打开,出现蒙层,按钮无法点击

解决方案:

出现蒙版遮罩和层级肯定是有关,但是尝试设置z-index没有任何效果。

参照elementPlus文档Dialog 对话框 | Element Plus

 这个属性是关于遮罩层问题的,添加  :append-to-body="true" 后,就解决了遮罩层的问题,可以参照下属性说明来理解下。

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android弹窗dialog可以通过使用PopupWindow和Dialog来实现。PopupWindow是一个在屏幕上方显示的浮动控件,而Dialog是一个模态对话框。对于PopupWindow的使用,可以通过创建一个布局文件,然后在代码中使用PopupWindow类来显示该布局。而对于Dialog使用,可以通过创建一个AlertDialog.Builder对象,设置对话框的标题、内容和按钮等属性,最后调用show()方法显示对话框。 下面是一个使用PopupWindow的示例代码: ```java // 创建PopupWindow对象 PopupWindow popupWindow = new PopupWindow(context); // 设置要显示的布局 View view = LayoutInflater.from(context).inflate(R.layout.popup_layout, null); popupWindow.setContentView(view); // 设置PopupWindow的宽度和高度 popupWindow.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT); popupWindow.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT); // 设置PopupWindow的背景 popupWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); // 设置PopupWindow是否可点击 popupWindow.setTouchable(true); // 设置PopupWindow是否获取焦点 popupWindow.setFocusable(true); // 设置PopupWindow的位置 popupWindow.showAtLocation(anchorView, Gravity.CENTER, 0, 0); ``` 下面是一个使用Dialog的示例代码: ```java // 创建AlertDialog.Builder对象 AlertDialog.Builder builder = new AlertDialog.Builder(context); // 设置对话框的标题 builder.setTitle("提示"); // 设置对话框的内容 builder.setMessage("这是一个对话框"); // 设置对话框的按钮 builder.setPositiveButton("确定", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // 点击确定按钮的逻辑处理 } }); builder.setNegativeButton("取消", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { // 点击取消按钮的逻辑处理 } }); // 创建并显示对话框 AlertDialog dialog = builder.create(); dialog.show(); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值