My Custom Popup Area

// Image Popup with cross button
========================================
jQuery(document).ready(function(){
        jQuery('button#pop_click').on('click', function(){
                jQuery(this).parents('body').find('div.empreendimento_contant_popuparea').addClass('active_pop');
        });
        jQuery('button#popup_close').on('click', function(){
                jQuery(this).parents('div.empreendimento_contant_popuparea').removeClass('active_pop');
        });
});

-----------------html---------------------
				<div class="ampliar_button fix">
					<button id="pop_click"></button>
					<p>Ampliar planta</p>
				</div>
				<div class="empreendimento_contant_popuparea fix">
					<div class="empreendimento_popup fix">
						<button type="button" id="popup_close"><i class="fa fa-times"></i></button>
						<img src="<?php echo get_template_directory_uri();?>/img/map.png" alt="" />
					</div>
				</div>

---------------- css ----------------------
.empreendimento_contant_popuparea{position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0;visibility: hidden;}
.empreendimento_contant_popuparea.active_pop{opacity: 1;visibility: inherit;background: rgba(0, 0, 0, 0.5);z-index: 9;}
#popup_close{position: absolute;right: 0;top: 0;background-color: transparent;}
#popup_close .fa-times{font-size: 23px;background-color: #fff;border-radius: 23px;width: 25px;height: 25px;}
.empreendimento_popup{margin: 5% auto;position: relative;width: 50%;}


// Contact form Popup with cross button
========================================
jQuery(document).ready(function(){
	jQuery('button#register_update').on('click', function(){
		jQuery(this).parents('body').find('div#register_update_content').addClass('active');
	});
	jQuery('button#register_close, div#register_update_close').on('click', function(){
		jQuery(this).parents('div#register_update_content').removeClass('active');
	});
});

-----------------html---------------------
<button type="button" id="register_update"><h2>Click here for register</h2></button>

<div class="register_update_content_area fix" id="register_update_content">
	<div id="register_update_close" class="fix"></div>
	<div class="register_update_content column fix">
		<div class="register_update_content_wrapper fix">
			<button type="button" id="register_close"><img src="<?php echo get_template_directory_uri(); ?>/img/week_close.png" alt="" /></button>
			<div class="register_update_form fix">
				<input type="text" placeholder="השם שלך" class="form_input" />
				<input type="text" placeholder="המייל" class="form_input" />
				<input type="submit" value="שלח לי עדכונים" class="form_submit" />
			</div>
		</div>
	</div>
</div>

---------------- css ----------------------
#register_update{}
.register_update_content_area{position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0;visibility: hidden;}
.register_update_content_area.active{opacity: 1;visibility: inherit;}
#register_update_close{position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 9; cursor: -webkit-zoom-out;}
.register_update_content{}
.register_update_content_wrapper{position: relative;z-index: 99;margin: 35% 0%;}
button#register_close{background: transparent;padding: 0px;position: absolute;top: -60px;right: 0px;}
button#register_close img{width: 100%;height: auto;display: block;}
button#register_close:focus{box-shadow: 0px 0px 0px 0px #fff;}
.register_update_form{margin: 0% 5%;}
.register_update_form input.form_input{float: right;width: 32%;margin-left: 2%;}
.register_update_form input.form_submit{float: left;width: 32%;}
.register_update_form input.form_submit:hover{background: #fff;}

// Map Popup with cross button
==========================================
jQuery(document).ready(function(){
 jQuery('a.mapframe').click(function() {
  jQuery(this).parents('div.saopaulo_office_locimg').find('div.mapiframe').addClass('active_iframe');
 });
 jQuery('button.clos').click(function() {
  jQuery(this).parents('div.mapiframe').removeClass('active_iframe');
 });
});

--------------  this is mark up --------------------------
<a class="mapframe" href="#">
<img src="http://www.cunhapontes.adv.br/wp-content/themes/cunhapontes/img/locatcontato.png" alt="" />
</a>
<div class="mapiframe fix">
<button type="button" class="clos"><i class="fa fa-times"></i></button>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.8209243190868!2d-46.68858490000003!3d-23.574874199999993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5772e9e9f0bb%3A0x1a545036d70c75f4!2sAv.+Brg.+Faria+Lima%2C+2012+-+Jardim+Europa%2C+S%C3%A3o+Paulo+-+SP!5e0!3m2!1spt-BR!2sbr!4v1424701769150" width="300" height="150" frameborder="0"></iframe>
</div>
------------ and this is for style -----------------------
.mapiframe{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(26, 59, 112, 0.59);z-index: -30;padding: 10%;opacity: 0;}
.mapiframe.active_iframe{opacity: 1;z-index: 9999;}
.mapiframe iframe{width: 100%;height: 450px;background: #fff;padding: 5px;}
button.clos{position: absolute;top: 70px;right: 40px;background: transparent;color: #fff;font-size: 25px;padding: 0px;}