应聘职位弹窗css3

应聘职位

申请职位

请将简历发至邮箱：hr@0898hnjk.com

知道了

 

2

<style>
html, body, div, span, applet, object, iframe,h1,h2,h3,h4,h5,h6,p,blockquote, pre, a, abbr,nav,ul,ol, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video
{ margin:0px; padding:0px; border:0px; font-size:14px; font-weight: normal; text-decoration: none; list-style: none; }
body{color:#454545;}
input{outline:none;}
body{font:12px/1.5 "Microsoft YaHei",tahoma,arial,Hiragino Sans GB,\5b8b\4f53;margin:0 auto; padding:0px;}
a{color:#535353; transition:All 0.3s ease-in-out;}
a:link,a:visited,a:hover,a:active{outline:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.job-go {
margin: 15% auto;
display: block;
width: 155px;
line-height: 55px;
text-align: center;
font-size: 14px;
color: #fff;
background: #f47f57;
position: relative;
}

.job-go i {
position: absolute;
display: block;
left: 0;
top: 0;
width: 0;
height: 100%;
background:#b5261e;
}
.job-go span {
position: relative;
}
.job-go:hover span {
color: #fff;
}

.job-go:hover{border-color: #b5261e;}
.job-go:hover i {
width: 100%;
}

.trans-3 {
-webkit-transition: all 0.35s linear;
transition: all 0.35s linear;
}


.cd-popup3{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
z-index:9999;
}
.cd-popup3.is-visible3 {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container3 {
position: relative;
width:640px;
margin:200px auto;
height:300px;
background: #FFF;
border-radius: .4rem .4rem .4rem .4rem;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-ms-transform:scale(0.8);
-o-transform:scale(0.8);
transform:scale(0.8);
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.cd-popup-close{ position: absolute;right:10px;top:14px; z-index: 10;width:auto;height:22px; width:21px; display: block;font-size:14px; background:url(../images/wr_gb.png) no-repeat;}
.is-visible3 .cd-popup-container3 {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
.cd-popup-container3 p{ background:#f47f57; height:50px; line-height:50px; color:#fff; padding-left:20px; font-size:16px;}
.cd-buttons{ height:100px; padding:50px 50px 0 150px; font-family:"微软雅黑";}
.cd-buttons b{ width:140px; float:left; font-size:15px; color:#555;}
.cd-buttons span{ float:right; width:300px;}
.cd-wzd{ width:170px; height:46px; border-radius:5px; margin:0 auto; line-height:46px; text-align:center; font-family:"微软雅黑"; font-size:16px; color:#666; border:solid 1px #ccc;}
.cd-wzd a{ color:#333;}

</style>

<a href="javascript:;" class="job-go trans-3 cd-popup-trigger3"><i class="trans-3"></i><span class="trans-3">应聘职位 </span></a>


<div class="cd-popup3">
<div class="cd-popup-container3">
<p>申请职位</p>
<div class="cd-buttons">
<b>请将简历发至邮箱：</b><span>hr@0898hnjk.com</span> <span></span> 
</div>
<div class="cd-wzd"><a href="#0" class="cd-popup-close2">知道了</a></div>
<a href="#0" class="cd-popup-close"></a>
</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
//打开窗口
$('.cd-popup-trigger3').click(function(event){
event.preventDefault();
$('.cd-popup3').addClass('is-visible3');
//$(".dialog-addquxiao").hide()
});
//关闭窗口
$('.cd-popup3').click(function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup3') ) {
event.preventDefault();
$(this).removeClass('is-visible3');
}
});

//我知道了
$('.cd-popup3').on('click', function(event){
if( $(event.target).is('.cd-popup-close2') || $(event.target).is('.cd-popup3') ) {
event.preventDefault();
$(this).removeClass('is-visible3');
}
});
//ESC关闭
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup3').removeClass('is-visible3');
}
});

//在线简历弹窗end


})

</script>