Membuat Dialog show up dengan JQuery
Dialog show up dengan JQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="sunny/jquery-ui-1.8.9.custom.css">
<script type="text/javascript" src="jscript/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jscript/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$('#pesan').dialog({
autoOpen:false, show:'puff', hide:'explode',
height:300, width: 420, modal: true, resizeable:false,
buttons: {
Continue: function() { $(this).dialog('close') },
'Change Rating': function() { $(this).dialog('close') }
}
});
$('#buka').click( function() {
$('#pesan').dialog('open');
return false;
});
});
</script>
</head>
<body>
<p > Welcome to <strong>StarTrackr!</strong> the planet's premier. The functionality we'll implement will degrade gracefully in the absence of Java-Script; those tabs will simply act as links to the referenced files. When JavaScript is enabled, however, jQuery will load the content of the target page into the tab content pane without refreshing the page.</p>
<!--<button id="buka">tampil dialog</button>-->
<a href="#" id="buka">tampil dialog</a>
<div id="pesan" title="Are you sure?">
<p>You've assigned the current celebrity a rating of 0…</p>
<p>Perhaps you are just judging them on the terrible …</p>
</div>
</body>
</html>
Berikut kode untuk membuat Dialog dengan JQuery :
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="sunny/jquery-ui-1.8.9.custom.css">
<script type="text/javascript" src="jscript/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jscript/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$('#pesan').dialog({
autoOpen:false, show:'puff', hide:'explode',
height:300, width: 420, modal: true, resizeable:false,
buttons: {
Continue: function() { $(this).dialog('close') },
'Change Rating': function() { $(this).dialog('close') }
}
});
$('#buka').click( function() {
$('#pesan').dialog('open');
return false;
});
});
</script>
</head>
<body>
<p > Welcome to <strong>StarTrackr!</strong> the planet's premier. The functionality we'll implement will degrade gracefully in the absence of Java-Script; those tabs will simply act as links to the referenced files. When JavaScript is enabled, however, jQuery will load the content of the target page into the tab content pane without refreshing the page.</p>
<!--<button id="buka">tampil dialog</button>-->
<a href="#" id="buka">tampil dialog</a>
<div id="pesan" title="Are you sure?">
<p>You've assigned the current celebrity a rating of 0…</p>
<p>Perhaps you are just judging them on the terrible …</p>
</div>
</body>
</html>
Jika dijalankan tampilan nya sebagai berikut :
Download code lengkap disini
Selesai...
Semoga Bermanfaat....