Belajar JQuery: Membuat Popup Window dengan JQueryPopupWindow

Popup Window adalah Window atau jendela dialog/program yang muncul diatas window utama. Popup Window ini sangat berguna untuk mengakomodir halaman baru yang kecil dan berisi informasi penting tapi tak ditampilkan di halaman utama. Dengan jQuery kita bisa membuat popup window dengan plugin jquery.popupwindow.

Download

Source Code

Berikut adalah contoh source code yang bisa anda pakai:

<!--more-->
<html>
<head>
	<title>PopUpWindow Example</title>
	<style type="text/css">
	body{font-family:Georgia; margin:10px;}
	pre{background-color:#000; color:#FFF; border:1px solid red; padding:10px;}
	a{text-decoration:none;}
	a:hover{background-color:#FFFCCC;}
	.download { float: right; margin-right: 150px;}
	</style>
  	<script type="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="jquery.popupwindow.js"></script>
   	<script type="text/javascript">
	var profiles =
	{

		window800:
		{
			height:800,
			width:800,
			status:1
		},

		window200:
		{
			height:200,
			width:200,
			status:1,
			resizable:0
		},

		windowCenter:
		{
			height:300,
			width:400,
			center:1
		},

		windowNotNew:
		{
			height:300,
			width:400,
			center:1,
			createnew:0
		},

		windowCallUnload:
		{
			height:300,
			width:400,
			center:1,
			onUnload:unloadcallback
		},

	};

	function unloadcallback(){
		alert("unloaded");
	};


   	$(function()
	{
   		$(".popupwindow").popupwindow(profiles);
   	});
	</script>

</head>
<body>
<p>Takes a link and will create a popupwindow based on the href of the link. You can over ride the default setting by passing your own settings or profile name in the REL attribute of the link.</p>
<dl>
	<dt>Default settings:</dt>

	<dd><a href="https://emka.web.id" class="popupwindow">Example 1</a></dd>
</dl>

<dl>
	<dt>Custom settings:</dt>
	<dd><a href="https://emka.web.id" class="popupwindow" rel="height:400,width:400">Example 1</a> - height:400,width:400</dd>
	<dd><a href="https://emka.web.id" class="popupwindow" rel="height:550,width:750,toolbar:1,scrollbars:1,status:1,resizable:0,left:50,top:100">Example 2</a> - height:550,width:750,toolbar:1,scrollbars:1,status:1,resizable:0,left:50,top:100</dd>

</dl>

<dl>
	<dt>Using profiles:</dt>
	<dd><a href="https://emka.web.id" class="popupwindow" rel="windowCallUnload">Example 1</a> - window800</dd>
	<dd><a href="https://emka.web.id" class="popupwindow" rel="window200">Example 2</a> - window200</dd>
	<dd><a href="https://emka.web.id" class="popupwindow" rel="windowCenter">Example 3</a> - windowCenter</dd>

</dl>

<dl>
	<dt>Same window:</dt>
	<dd><a href="https://emka.web.id" class="popupwindow" rel="windowNotNew">Example 1</a> - windowNotNew</dd>
	<dd><a href="http://www.jquery.com" class="popupwindow" rel="windowNotNew">Example 2</a> - windowNotNew</dd>
</dl>

<dl>
	<dt>onUnload event:</dt>
	<dd><a href="https://emka.web.id" class="popupwindow" rel="windowCallUnload">Example 1</a> - windowCallUnload</dd>
</dl>

Selamat mencoba!

Wagiman Wiryosukiro

Petani Sistem Informasi, tukang las plugin & themes Wordpress. Co-Founder SistemInformasi.biz. Saat ini aktif sebagai Developer & kontributor di OpenMandriva Linux.

You may also like...

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: