Membuat Mask/Modal disertai image Loading

Terbiasa menggunakan Framework Extjs jadi terasa bingungnya saat diharuskan menggunakan pure code sendiri karena memerlukan customize yang besar. lalu pilihan jatuh ke Jquery. sederhana sekali saat itu hanya ingin membuat masking dan loading saat load data menggunakan extjs. tapi ternyata begitu repotnya.

Nyari plugin ga ada yang suport dan biasa. akhirnya bisa dibuat setelah browsing2 dan minta bantuan. berikut codenya siapa tau ada yang berkepentingan sama.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Sistem Manajement Surat -  Eksekutif</title>
	<script type="text/javascript" src="jquery-1.9.1.js"></script>
	<style type="text/css">
	#fx_modal{
		background: rgba(62, 128, 163, 0.6);
		float:right;
		left:300px;
		position:absolute;
		z-index:900;
		display:none;
	}
	#fx_loading{
		width:140px;
		text-align:center;
		z-index:901;
		background:#FFF;
		padding:5px;
		border-radius:5px;
		border:2px #CCCCCC solid;
	}
	</style>
	<script type="text/javascript">
	function modal_hide(){
			$("#fx_modal").hide();
	}
  	function modal_show(target_modal){
		//alert(target_modal);
		//hitung panjang,tinggi,kanan dan kiri target, dipakai modal
			var panjang = $(target_modal).width(); 			var tinggi 	= $(target_modal).height();
			var kiri	= $(target_modal).offset().left;	var atas	=$(target_modal).offset().top;
		//hitung untuk letak loading	150=panjang dan tinggi loading.gif 75/2=25
			var kiri_l	= kiri-75+panjang/2;					var	atas_l	=atas-75+tinggi/2;
			$("#fx_modal").show();
			$("#fx_modal").offset({top:atas, left:kiri});
			$("#fx_modal").height(tinggi); $("#fx_modal").width(panjang);
			$("#fx_loading").offset({top:atas_l, left:kiri_l});
	}

	$(document).ready(function(){
	  $("#div_kiri").click(function(){
				modal_show("#div_kanan");
	  });
	  $("#div_kanan").click(function(){
				modal_show("#div_kiri");
	  });
	});
	</script>
</head>
<body>
<div id="fx_modal">
	<div id="fx_loading">
	<img src="loading.gif" /><br />
	Tunggu Sebentar ...
	</div>
</div>

	<a href="javascript:modal_hide()">hide</a>	<a href="javascript:modal_show('#div_kiri')">show</a>
	<div style="width:300px; border-radius:25px; position:absolute; top:100px; height:300px; background:red; float:left;" id="div_kiri">
	Klik disisni
	</div>

	<div style="width:400px; height:600px; background:blue; float:right" id="div_kanan">
	Klik disini Juga.😀
	</div>
</body>
</html>

SIlahkan bereksperimen.. semoga berhasil… membuat mask/modal dan loading yang diinginkan dengan jquery.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s