jquer+css+html遮罩弹窗的实现

最新推荐文章于 2023-07-21 14:08:03 发布

原创最新推荐文章于 2023-07-21 14:08:03 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

心得专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了一种使用HTML、CSS和jQuery实现的网页弹窗对话框设计方法，包括页面布局、样式设置及功能实现。展示了如何通过点击按钮显示和隐藏带有输入表单的对话框，适用于用户注册或信息收集等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面布局：

<body>
	<div id="fullbg">
		</div>
	<div id="main">
		<a href="javascript:showBg();">点击查看效果</a>
		
        
		<div id="dialog">
			<p class="close">
			    <span>
			         	新增用户
			    </span>
			    <a href="#" onclick="closeBg();"><img src="img/弹窗/圆角矩形1拷贝2.png"/></a>
			</p>
						<div class="dialog_main">
						    <div class="num">手机号：<input type="text" /></div>
						    <div class="name">
						         	姓名：<input type="text" />
						    </div>
						    <div class="sex">
						        	性别：<input type="radio" name="sex" id="" value="" />男
						    	<input type="radio" name="sex" id="" value="" />女
						    </div>
						    <em>功能：</em>
						    <div class="fun">
						        <div><input type="radio" name="fun" id="" value="" />内容内容</div>
						        <div><input type="radio" name="fun" id="" value="" />内容内容</div>
						        <div><input type="radio" name="fun" id="" value="" />内容内容</div>
						    </div>
						    <a href=""onclick="closeBg();"><input type="button" name="" id="" value="取消" class="qx" /></a>
						    <input type="button" name="" id="" value="确定" class="qd" />
						</div>
		</div>
 	</div>
</body>

css样式：

<style>
        body
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            margin: 0;
            background: burlywood;
        }
        em{
        	font-style: normal;
        }
        #main
        {
            height: 1800px;
            padding-top: 90px;
            text-align: center;
        }
        #fullbg
        {
            background-color: #fff;
            left: 0;
            opacity: 0.5;
            position: absolute;
            top: 0;
            z-index: 3;
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
            -khtml-opacity: 0.5;
           
        }
        #dialog
        {
            height: 365px;
            left: 50%;
            margin: -200px 0 0 -200px;
            padding: 1px;
            position: fixed !important; /* 浮动对话框 */
            position: absolute;
            top: 50%;
            width: 365px;
            z-index: 999;
            display: none;
            background: url(img/弹窗/bg.png) no-repeat;
        }
        #dialog .close span{
        	position: absolute;
        	top: 10px;
        	left: 40%;
        	color: #fff;
      		font-size: 16px;
        }
        #dialog .close a
        {
            position: absolute;
            right: 15px;
            top: 15px;
        }
         #dialog .dialog_main{
         	margin-top: 60px;
         	text-align: left;
         }
        #dialog .dialog_main .num{
        	margin-left: 30px;
        }
        #dialog .dialog_main .name,
        #dialog .dialog_main .sex,
        #dialog .dialog_main em{
        	margin-left: 42px;
        	margin-top: 10px;
        }
        #dialog .dialog_main .fun div{
        	width: 230px;
        	height: 45px;
        	line-height: 45px;
        	padding-left: 23px;
        	border-bottom:1px solid #eaeaea ;
        	font-size: 12px;
        	
        }
         #dialog .dialog_main .fun{
         	margin-left: 73px;
         }
        #dialog .dialog_main .fun input{
        	margin-right: 15px;
        }
         #dialog .dialog_main .sex input{
         	margin-left: 23px;
         }
        #dialog .dialog_main input[type=text]{
        	border: 2px solid #b7b9be;
        	border-radius: 2px;
        	width: 150px;
        	height: 20px;
        	margin-left: 20px;
        	padding-left: 10px;
        }
         #dialog .dialog_main input[type=button]{
         	border: 1px solid #c7c6ca;
         	border-radius: 2px;
         	font-size: 11px;
         	width: 70px;
         	height: 28px;
         	margin-top: 10px;
         }
          #dialog .dialog_main .qx{
          	background: url(img/弹窗/圆角矩形1拷贝3.png) no-repeat 10% ;
			margin-left: 165px;  
			color: #474747;     
          }
            #dialog .dialog_main .qd{
            	margin-left: 10px;
            	
            	color: #fff;
            	background:url(img/弹窗/形状1.png)  no-repeat 10% #118eea;
            }
    </style>

jquery(功能实现)

<script type="text/javascript">
        
        //显示灰色 jQuery 遮罩层 
        function showBg() {
            var bh = $("body").height();
            var bw = $("body").width();
            $("#fullbg").css({
                height: bh,
                width: bw,
                display: "block"
            });
            $("#dialog").show();
        }
        //关闭灰色 jQuery 遮罩 
        function closeBg() {
            $("#fullbg,#dialog").hide();
        } 
    </script>

效果图：