.panel {
    background-color: #fff;
    height: 34px;
    padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
    border: 1px solid #dfdfdf;
    color: #fff;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 0px 0px #000;

    border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
    border-color: #424c7c;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.0);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 10;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
	background-color: #ffffff;
	border: 1px solid #424c7c;
	display: inline-block;
	left: 50%;
	opacity: 0;
	padding: 24px;
	position: fixed;
	text-align: justify;
	top: 10%;
	visibility: hidden;
	z-index: 99999999;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 10px;
	background-color:#fafafa;

}
.overlay:target+.popup {
    top: 40%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color:#fff;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color:#ff0000;
    content: "X";
    font-size: 26px;
    text-shadow: 0 -1px rgba(0, 0, 0, 5.9);
}
.close:hover {
    background-color:#424c7c;
}
.popup p, .popup div {
    margin-bottom: 10px;
}

Read more: http://skill-css.blogspot.com/2014/08/tao-pop-up-bang-css3.html#ixzz3Sk8L7kmm