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
- jQuery terbaru (1.6.1): http://code.jquery.com/jquery-latest.js (klik kanan save as)
- jQuery.popup.window: https://cms.emka.web.id/wp-content/uploads/2011/05/jquery.popupwindow.js
Source Code
Berikut adalah contoh source code yang bisa anda pakai:
[sourcecode language=”html”]<!–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://cms.emka.web.id" class="popupwindow">Example 1</a></dd>
</dl>
<dl>
<dt>Custom settings:</dt>
<dd><a href="https://cms.emka.web.id" class="popupwindow" rel="height:400,width:400">Example 1</a> – height:400,width:400</dd>
<dd><a href="https://cms.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://cms.emka.web.id" class="popupwindow" rel="windowCallUnload">Example 1</a> – window800</dd>
<dd><a href="https://cms.emka.web.id" class="popupwindow" rel="window200">Example 2</a> – window200</dd>
<dd><a href="https://cms.emka.web.id" class="popupwindow" rel="windowCenter">Example 3</a> – windowCenter</dd>
</dl>
<dl>
<dt>Same window:</dt>
<dd><a href="https://cms.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://cms.emka.web.id" class="popupwindow" rel="windowCallUnload">Example 1</a> – windowCallUnload</dd>
</dl>
[/sourcecode]
Selamat mencoba!