css和js弹窗

最新推荐文章于 2024-06-28 11:30:00 发布

墨墨博客

最新推荐文章于 2024-06-28 11:30:00 发布

阅读量576

点赞数

分类专栏： css3 javascript 文章标签： css javascript 弹窗

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/65438324

版权

javascript 同时被 2 个专栏收录

75 篇文章 2 订阅

订阅专栏

css3

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>弹窗</title>
	<link rel="stylesheet" href="">
	<script src='jQuery.js'></script>
	<style>
		 .window{
        display: none;
    }
         .active {
            display: block;
        }
    .showModel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000000;
        background: rgba(0, 0, 0, .3);
        filter: alpha(opacity=30); //兼容ie8
        z-index: 999;
}
        .inputbox {
            width: 755px;
            height: 425px;
            margin: 0 auto;
            text-align: center;
        }
        .mainBox {
            margin: 0 auto;
            text-align: center;
            position: fixed;
            z-index: 99999;
            top: 200px;
            filter: alpha(opacity=100);
        }
        .messBox {
            background-color: #ffffff;
            width: 755px;
            height: 295px;
            color: #ed6501;
            font-size: 24px;
            margin: 0 auto;
            padding-top: 37px;
            border-radius: 8px;
            filter: alpha(opacity=100);
        }
        
        .box1 {
            margin: 20px 0;
        }
        input {
            width: 391px;
            height: 32px;
            border-radius: 10px;
            background-color: #F4F4F4;
            border: 1px solid #8C8C8C;
            line-height: 32px;
            font-size: 16px;
            outline: none;
        }
        .tips {
            text-align: justify;
            width: 472px;
            height: 50px;
            color: #303030;
            font-size: 20px;
            margin: 0 auto;
            margin-top: 30px;
            line-height: 31px;
        }
        .commitBtn {
            width: 76px;
            height: 32px;
            margin: 0 auto;
            color: #FFF3CA;
            font-size: 20px;
            background-color: #ED6501;
            border-radius: 6px;
            line-height: 32px;
            text-align: center;
            margin-top: 30px;
            cursor: pointer;
        }
        .receive{
        	width: 100px;
        	height: 60px;
        	background-color: red;
        	border: 1px solid blue;
        	color: #fff;
        	font-size: 20px;
        	margin: 0 auto;
        	text-align: center;
        	line-height: 60px;
        }
	</style>
</head>
<body>

		<div class="receive">
			点我
		</div>
	<div class="window ">
          <!--遮盖层-->
          <div class="showModel"></div>
          <!--弹窗主体-->
          <div class="inputbox">
            <div class="mainBox">
              <div class="messBox">
                <div class="box1">
                  <label>请输入您的手机号码:</label>
                  <input type="text" id="phone">
                </div>
                <div class="box2">
                  <label>请输入您的邮箱地址:</label>
                  <input type="text" id="email">
                </div>
                <div class="commitBtn">提交</div>
              </div>
            </div>
          </div>
        </div>

        <script>
        	$(".receive").off().on('click',function(){
                $(".window").addClass("active");
            });
        </script>
</body>
</html>

墨墨博客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css和js弹窗

弹窗 .window{ display: none; } .active { display: block; } .showModel { position: fixed; top: 0; left: 0; width: 100
复制链接

扫一扫

专栏目录