js弹窗、透明膜、单选框隐藏

最新推荐文章于 2022-06-09 19:52:46 发布
最新推荐文章于 2022-06-09 19:52:46 发布
阅读量412 收藏
点赞数
分类专栏： 前端 文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40237472/article/details/109381007
版权
这段代码展示了如何实现一个弹窗功能，用于处理用户封禁操作。弹窗包括封禁昵称和ID显示，违规类型选择（如匹配违规、聊天违规等），封禁时长选择（3天至永久），以及封禁原因输入。点击确定按钮会触发封禁操作，而取消按钮则关闭弹窗。整个交互过程通过JavaScript控制，动态改变选中选项的背景色以提供视觉反馈。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript"> 
                    //开始弹框
            function popupon() {
                var popup = document.getElementById("popup");
                popup.style = "display: block;";
            }
            //取消弹窗
            function popupoff() {
                var popup = document.getElementById("popup");
                popup.style = "display: none;";
            }
            //点击单选款，改变背景色
            function changeradtimecolor() {
                    var obj = document.getElementsByName("radtime");
                    for(var i=0; i<obj.length; i ++){
                            if(obj[i].checked){
                                if(obj[i].value == 3){
                                    var diva = document.getElementById("rpa");
                                    diva.style.backgroundColor = "#8d9cb1";
                                    document.getElementById("rpb").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpc").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpd").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpe").style.backgroundColor = "#3c4153";
                                }
                                if(obj[i].value == 15){
                                    var divb = document.getElementById("rpb");
                                    divb.style.backgroundColor = "#8d9cb1";
                                    document.getElementById("rpa").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpc").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpd").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpe").style.backgroundColor = "#3c4153";
                                }
                                if(obj[i].value == 30){
                                    var divc = document.getElementById("rpc");
                                    divc.style.backgroundColor = "#8d9cb1";
                                    document.getElementById("rpa").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpb").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpd").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpe").style.backgroundColor = "#3c4153";
                                }
                                if(obj[i].value == 365){
                                    var divd = document.getElementById("rpd");
                                    divd.style.backgroundColor = "#8d9cb1";
                                    document.getElementById("rpa").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpb").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpc").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpe").style.backgroundColor = "#3c4153";
                                }
                                if(obj[i].value == 0){
                                    var dive = document.getElementById("rpe");
                                    dive.style.backgroundColor = "#8d9cb1";
                                    document.getElementById("rpa").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpb").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpc").style.backgroundColor = "#3c4153";
                                    document.getElementById("rpd").style.backgroundColor = "#3c4153";
                                }
                            }
                        }
                }
        </script>
        <style>
            /*隐藏单选框的,方便被div覆盖*/
            label input[type="radio"] {
                appearance: none;
                -webkit-appearance: none;
                outline: none;
                margin: 0;
                vertical-align: text-bottom;
                margin-right: 0.1rem;
            }
            /*透明背景*/
            .popup-w{
                /*display: block;*/
                display:none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.3);/*透明背景,可调透明度*/
                z-index: 999;
            }
            .popup{/*弹窗*/
                box-sizing: border-box;
                position: absolute;
                width: 600px;
                height: 437px;
                background: #181c28;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                border-radius: 25px;
            }
            .popup-da{
                width: 600px;
                height: 25px;
                margin-top: 42px;
                font-size: 20px;
                font-family: SourceHanSansCN-Regular;
                color: #8d9cb1;
            }
            .popup-daa{
                float: left;
                margin-left: 40px
            }
            .popup-dab{
                float: right;
                margin-right: 140px
            }
            .popup-db{
                width: 600px;
                height: 25px;
                padding: 38px 0 0 0;
                font-size: 20px;
                font-family: SourceHanSansCN-Regular;
                color: #8d9cb1;
            }
            .popup-dba{
                float: left;
                margin-left: 40px
            }
            .popup-dbb{
                float: left;
                font-size: 18px;
                font-family: SourceHanSansCN-Regular;
                text-align: center;
                color: #ffffff;
            }
            /* 选中后背景颜色改为字体颜色，字体颜色改为白色*/
            .popup-dbba{
                width: 48px;
                height: 23px;
                float: left;
                background: #3c4153;
                color: #FFFFFF;
                border: 1px solid #8d9cb1;
                border-radius: 5px
            }
            .popup-dbbb{
                width: 66px;
                height: 23px;
                float: left;
                margin-left: 20px;
                background: #3c4153;
                color: #FFFFFF;
                border: 1px solid #8d9cb1;
                border-radius: 5px
            }
            .popup-dbbc{
                width: 48px;
                height: 23px;
                float: left;
                margin-left: 20px;
                background: #3c4153;
                color: #FFFFFF;
                border: 1px solid #8d9cb1;
                border-radius: 5px
            }
            .popup-dc{
                width: 600px;
                height: 25px;
                padding: 38px 0 0 0;
                font-size: 20px;
                font-family: SourceHanSansCN-Regular;
                color: #8d9cb1;
            }
            .popup-dca{
                float: left;
                margin-left: 40px
            }
            .popup-dcb{
                float: left;
                font-size: 18px;
                font-family: SourceHanSansCN-Regular;
                text-align: center;
                color: #ffffff;
            }
            /*选中后背景颜色改为字体颜色，字体颜色改为白色*/
            .popup-dcba{
                width: 80px;
                height: 23px;
                float: left;
                background: #3c4153;
                color: #FFFFFF;
                border: 1px solid #8d9cb1;
                border-radius: 5px
            }
            .popup-dcbb{
                width: 80px;
                height: 23px;
                float: left;
                margin-left: 20px;
                background: #3c4153;
                color: #FFFFFF;
                border: 1px solid #8d9cb1;
                border-radius: 5px
            }
            .popup-dd{
                width: 600px;
                height: 125px;
                padding: 38px 0 0 0;
                font-size: 20px;
                font-family: SourceHanSansCN-Regular;
                color: #8d9cb1;
            }
            .popup-dda{
                float: left;
                margin-left: 40px
            }
            .popup-ddb{
                float: left;
                font-size: 18px;
                font-family: SourceHanSansCN-Regular;
                text-align: center;
                color: #ffffff;
            }
            .popup-ddbtxt{
                width: 412px;
                height: 120px;
                background: #3c4153;
                font-size: 20px;
                color: white;
            }
            .popup-de{
                width: 600px;
                height: 30px;
                padding: 25px 0 0 0;
                font-size: 20px;
                font-family: SourceHanSansCN-Regular;
                color: #8d9cb1;
            }
            .popup-dea{
                float: left;
                margin-left: 197px;
                width: 60px;
                height: 30px;
                background: #448aca;
                border-radius: 5px;
            }
            .popup-deb{
                float: right;
                margin-right: 198px;
                width: 60px;
                height: 30px;
                background: #448aca;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <input type="button" οnclick="popupon()" value="弹窗"/>
        <!--弹窗-->
<div class="popup-w" id="popup"><!--透明窗，可调节透明度-->
    <div class="popup"><!--显示窗-->
        <div class="popup-da">
            <div class="popup-daa" id="punishname">封禁昵称：小明</div>
            <div class="popup-dab" id="punishid">封禁ID：11111</div>
        </div>
        <div class="popup-db">
            <div class="popup-dba">违规类型：</div>
            <div class="popup-dbb">
                <div class="popup-dcba" id="colora">
                    <label><input class="rada"  type="radio" name ="radtime" value="3" />匹配违规</label>
                </div>
<!--                <div class="popup-dbbb" id="colorb">
                    <label><input class="radb" type="radio" name ="radtime" value="15" οnclick="changeradtimecolor()" />聊天违规</label>
                </div>
                <div class="popup-dbbb" id="colorc">
                    <label><input class="radb" type="radio" name ="radtime" value="30" οnclick="changeradtimecolor()" />评论违规</label>
                </div>
                <div class="popup-dbbc" id="colord">
                    <label><input class="radc" type="radio" name ="radtime" value="365" οnclick="changeradtimecolor()" />作品违规</label>
                </div>
                <div class="popup-dbbc" id="colore">
                    <label><input class="radc" type="radio" name ="radtime" value="0" οnclick="changeradtimecolor()" />其他</label>
                </div>-->
            </div>
        </div>

        <div class="popup-dc">
            <div class="popup-dca">封禁时长：</div>
            <div class="popup-dcb">
                <div class="popup-dbba" id="rpa">
                    <label><input type="radio" value="3" name = "radtime" οnclick="changeradtimecolor()" />三天</label>
                </div>
               <div class="popup-dbbb" id="rpb">
                    <label><input type="radio" value="15" name = "radtime" οnclick="changeradtimecolor()" />十五天</label>
                </div>
                <div class="popup-dbbb" id="rpc">
                    <label><input type="radio" value="30" name = "radtime" οnclick="changeradtimecolor()" />三十天</label>
                </div>
                <div class="popup-dbbc" id="rpd">
                    <label><input type="radio" value="365" name = "radtime" οnclick="changeradtimecolor()" />一年</label>
                </div>
                <div class="popup-dbbc" id="rpe">
                    <label><input type="radio" value="0" name = "radtime" οnclick="changeradtimecolor()" />永久</label>
                </div>
            </div>
        </div>
        <div class="popup-dd">
            <div class="popup-dda">封禁原因：</div>
            <div class="popup-ddb">
                    <textarea id="txtcont" class="popup-ddbtxt" maxlength="60" placeholder="输入不得超过60个字"></textarea>
            </div>
        </div>
        <div class="popup-de">
                <input class="popup-dea" type="button" value="取消" οnclick="popupoff()" />
                <input class="popup-deb" type="button" value="确定" οnclick="insertBlockadebyreport()"/>
        </div>
    </div>
</div>
    </body>
</html>

童心（成都）
关注
专栏目录
使用JavaScript在单选按钮上显示/隐藏控件单击
04-05
使用JavaScript通过单选按钮选择显示/隐藏标签控件。
易语言-易语言透明化的单选框
06-29
在这个特定的案例中，"易语言透明化的单选框"是一个源码示例，它展示了如何利用易语言来创建具有透明效果的单选框，以提升用户界面的美观度和用户体验。 透明化单选框主要通过透明标签组件来实现。在易语言中，组件...
js弹出div对话框（1，透明，2带拖动功能）
前端开发、简约至上！ - Html，Css，Js，Jquery ...
11-16 199
  （很好用的）js弹出div对话框（1，透明，2带拖动功能） JS DIV 弹出 &lt;html&gt; &lt;head&gt; &lt;script&gt; function sAlert(txt) { //var eSrc=(document.all)?window.event.srcElement:arguments[1]; var shield = document....
【JS】根据第一个单选框的值，来进行展示或隐藏第二个单选框
m0_46459413的博客
06-09 1002
需求：两个单选框，当第一个单选框选择的是公路时，则第二个单选框显示；如果第一个单选框选择的是其它选项，则第二个单选框隐藏。jsp代码： 在css中增添隐藏样式： js代码： 在第一个单选框中根据用户选择的值，来控制第二个单选框是否进行隐藏...
单选框控制表单的隐藏和显示
SailingAptech的专栏
03-17 958
[code="html"] function show(){ document.getElementById("test").style.display = "block"; } function hide(){ document.getElementById("test").style.display = "none"; } 显示不显示 ...
js控制多层单选，多选按钮，做隐藏操作
weixin_30756499的博客
03-04 335
项目中遇到多层级单选，多选按钮的置灰/隐藏操作。特意写了一个公用组件： //置灰方式 //controllerArr数组添加如下数据： //{ctrlName:"gds_anquanyuanshishi", hidType:1, hidArr:[{hidKey:"其他", hidName:"gds_qitashishi"},{hidKey:"aa", hidName:"gds_qit...
js 透明层蒙层弹窗
lllllyyyy的博客
12-20 921
设置弹出的div样式为 display: block; background: beige; position: absolute; top: 30%; left: 30%; width: 27%; 设置一个before 样式 position: fixed; top: 0; left: 0; z-index...
易语言透明化的单选框.rar
06-30
本压缩包"易语言透明化的单选框.rar"提供的是一个关于易语言中实现透明化单选框的源码示例。源码是编程中的基础组成部分，它由程序员编写，用以控制计算机执行特定任务的指令集合。 在易语言中，透明化单选框是一个...
jquery实现弹窗（系统提示框）效果
10-15
在本文中，我们将深入探讨如何使用jQuery来实现一个弹窗（系统提示框）的效果。jQuery是一种流行的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互等任务。在这个例子中，我们将创建一个基本的弹窗，它会...
JS实现右下角弹窗消息通知提示框插件特效源码.zip
11-01
在这个"JS实现右下角弹窗消息通知提示框插件特效源码.zip"压缩包中，包含了一个用JavaScript编写的插件，该插件实现了在网页右下角动态弹出消息通知的功能，为用户提供了一种即时信息提示的视觉效果。这种功能在许多...
利用js+css简单实现半透明遮罩弹窗
09-25
用到遮罩弹窗时在网上搜索，看到绝大多数都是基于Jquery的。我不想用那么复杂的应用，于是自己写了一个。
js+html5实现半透明遮罩层弹框效果
10-19
主要为大家详细介绍了js+html5实现半透明遮罩层弹框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5+CSS3 制作的图片半透明遮罩效果
09-17
HTML5+CSS3 制作的图片半透明遮罩效果
html弹窗 选择,js选择弹框_pannijingling的技术博客_51CTO博客
weixin_33507732的博客
06-03 1782
1、遮蔽层，弹框弹出时，页面变灰。场景:我要做一个图片上传,上传成功后,弹出一个页面,填写其他信息.上传图片的界面:选择文件之后,点击[上传]按钮,选择确定之后,图片上传到服务器,同时服务器会返回json字符串,其中有图片路径,此时使用单选框radio：function getRadio(name){var els = document.getElementsByNa...
8.2.点击表单控件（单选/复选/开关/下拉框），实现元素隐藏显示
大路的博客
02-26 2497
1.需求 1.1.使用场景 在添加编辑表单，经常会出现根据选项，动态显示和隐藏某些元素。比如添加一个网络设备，当选择通讯方式为串口时，需要填写串口号和波特率；当选择通讯方式为网卡时，需要选择IP地址和子网掩码。串口号和IP地址，不能同时出现，只能二选一。如下图所示的效果。 1.2.解决思路 正常的实现思路，是将这些表单输入框都放到页面上，然后根据通讯方式，进行动态的显示和隐藏。利用框架...
js弹出对话框(半透明背景，兼容各浏览器)
weixin_30835649的博客
08-26 241
　　js弹出对话框在某些情况下是一个很好的工具，通过半透明的设置，使得弹出对话框在弹出时仍然能够看到网页内容，会让用户有一个很好的界面体验。 而且懒人萱已做过测试，可以兼容现在的所有主流浏览器，所以你可以放心使用。如图所示： js弹出对话框截图　　另外，此js弹出对话框的div中包含一个iframe用于“载入”loading页面。 当弹出对话框中的内容比较多打开速度比较慢时，可以用loading...
用JS单选按扭隐藏切换
Net
07-25 3011
<br />用单选按扭实现隐藏域的切换<br /> <br />主要功能是单击男的单选按扭时，则出现男的 月吸烟花费与月喝酒花费<br /> <br />单击女的单选按扭时，则出现女的月花美费和花购衣费。<br /> <br />主要是用到style.display = "block" 和 style.display = "none" 两个。<br /> <br />详细的JS代码如下：<br /> <br />//单击性别按钮 function clickSex(ctype){ //如果选择了“男”
JS实现弹出层,背景透明,可关闭,参照浏览器永远居中
yuanzhipeng100511302的专栏
10-19 202
[size=large][color=black][b] 声明：这是一个个人很喜欢的JS实现，所以copy来了，学习效仿~[/size][/b] Jason //|------------------------------------------------------------------------------------ ...
选择不同的单选框，隐藏显示不同的页面效果
那就这样吧~
11-09 1282
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.4.js"></script> </head> <body> <fieldset> <legend>处
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值