css+html5+jQuery实现的简单弹窗|CSS|柏平博客

作为懒癌患者，在公司的一点金钱淫威下，我妥协了，连滚带爬的写了一个小东西。我向来是不惮以最坏的恶意，来推测公司的，然而我还不料，也不信竟会凶残到这地步。仅对刚入门小白有用，大神请绕道，感谢！！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css+jQuery实现的简单弹窗-柏平博客</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.zbpnice.cn/demo/8/js/jquery-1.8.3.min.js"></script> 
</head>
<style type="text/css">
        *{margin:0;padding:0px}
    #click{line-height:35px; width:80px;  height:35px; background:red; margin:20% auto;display:block; padding:10px; color:#fff;text-decoration:none;}
    .form{width:400px; border:1px solid #ddd; border-radius:5px; display: none; position:fixed; top:40%; left:50%;right:50%;margin-left:-200px; margin-right: -100px;  z-index: 10004; background: #fff;padding: 10px;}
    .form h2{ height: 35px; width: 80%; margin:0 auto; color:white; background: #ccc; line-height: 35px; text-align: center; }
    .form span{width: 80%; display: block; line-height: 35px; margin:0 auto;}
    label{float: left;margin:10px 0 10px 0;border-left:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;  padding: 0 10px  0 10px}
    input[type='text']{width: 64%; height: 35px; margin:10px 0 10px 0; border:1px solid #ccc;  padding: 0 15px 0 10px;outline:none}
    input[type='submit']{width: 80%; height: 35px; outline: none; margin:0 auto; display: block; background: red;color: white;}
    #screen{width: 100%;height: 100%;position:fixed; background: #000; opacity: .5; display: none;z-index: 10003;top: 0px; left:0px;}
</style>
<script type="text/javascript">
   function tj(){
    $('.form').slideDown('slow');
    $('#screen').show();
   } 

 function closer(){
       $('.form').fadeOut('slow'); 
       $('#screen').hide();
    }
</script>
<body>
<a href="javascript:void(0);" onclick="tj()" id="click">显示弹出层</a>
<div id="screen" onclick="closer()"></div>
<div class="form">
<center><h2>立即抢注</h2></center>
    <form action="#" method="post">
        <span><label id="fir">公司名称 </label><input type="text" name="title" placeholder="请输入公司名称"  pattern="^[\u4e00-\u9fa5]{2,4}$" required  maxlength="15" /></span>
        <span><label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 名</label><input type="text" name="name"  placeholder="请输入您的姓名" pattern="^[\u4e00-\u9fa5]{2,4}$" required maxlength="4"/></span>
        <span><label>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 话</label><input type="text" name="phone"  placeholder="请输入您的电话号码" pattern="^1[3-9]\d{9}$" required maxlength="11"/></span>
        <input type="submit" name="" value="抢注">
    </form>
</div>
</body>
</html>

更炫酷样式请自己思考