通过纯JS和css实现自定义弹出对话框

本文介绍了一种纯JavaScript和CSS实现自定义弹出对话框的方法,包括创建遮罩层、对话框元素,并展示关键代码,用于设置对话框的内容、样式和交互功能。对话框包含下拉列表选择和确认按钮,背景界面在弹出对话框时会被屏蔽。
摘要由CSDN通过智能技术生成

需求:

实现通过一个弹出对话框来选择下拉列表中对应值进行参数设置操作,及弹出对话框中需要有一个下拉列表输入和一个确定按钮即可,要求弹出对话框后,背部界面不能够操作或者被屏蔽灰掉。

思路:

1.开始以为so so much simple,毫不犹豫考虑prompt弹出对话框,结果发现prompt只能进行简单的文本输入操作,不能进行下拉列表选择输入操作,于是放弃。

2.很多BS模式系统中弹出对话框下拉列表是怎么实现的呢?因为他们可以使用强大的js库,如jquery,ext等等js库中有现成的对话框,功能超级强大哦,但是项目属于嵌入式项目,代码空间如城市里的地盘寸土寸金啊,不能为了一个小小需求而牺牲如此的代码空间去存放js库了,也就不能再考虑下去。

3.继续求助度娘,个人认为度娘在解决web前端问题方面还是很有实力的。发现了一种通用的解决方式,涉及到遮罩层、弹出层等等理论,就不赘述了,直接上解决方案吧。

解决方案:

关键js代码如下,

function createPrompt()
{
    var divSp = document.createElement("div");    //弹出对话框
    var newMask = document.createElement("div");  //遮罩层,用来屏蔽灰掉背部界面
    var btnSub = document.createElement("input"); // 弹出对话框中按钮
    var inner;

    // 弹出对话框中要呈现的页面元素布局等html代码
    inner = '<div class="fieldset" style="height:300px  background:#A9A9A9">';
    inner += ' <div class="fs-heading" style="background:#D2691E">';
    inner += ' <h2>Please set the Time zone when you first login !</h2>';
    inner +=

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值