Minimize effect in dialog window
How to create minimize effect in dialog window?I start with fadeOut()
and then when you click on <button> to fadeIn the dialog ,but i do not
know what selector to use.I write this code
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Default functionality</title>
<script type="text/javascript" src="../../../js/
jquery-1.3.2.min.js"></script>
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></
script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></
script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript" src="../../external/bgiframe/
jquery.bgiframe.js"></script>
<script type="text/javascript/javascript" src="jquerymui/
jquery.mui.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$.ui.dialog.defaults.bgiframe = true;
$(document).ready(function() {
$("#dialogg").dialog({
bgiframe: true,
resizable: false,
height:140,
modal: true,
minimize:true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
'Не затваряй': function() {
$("#dialog").dialog('enable');
$(this).dialog('close');
},
'Затвори': function() {
$("#dialog").dialog('destroy');
$(this).dialog('close');
}
}
});
});
$(function() {
$("#dialogg").dialog('close');
});
$(function() {
$("#dialog").dialog({
buttons: {
'+': function () {$(this).dialog('option','width','1000');
$(this).dialog('option','height','500');
},
'-': function () {$(this).dialog('option','width','200');
$(this).dialog('option','height','200');
},
'minimize': function() { $("div").click(function () {
$(this).fadeOut();
});
}
},
beforeclose:function() {$(this).dialog('disable');$
("#dialogg").dialog('open');return false;}
});
$("#buttons").click(function() {
$("div").fadeIn();
});
});
</script>
</head>
<body>
<div id="dialog" title="Прозорец">
<?php
echo '
<form method="POST" action="">
<textarea rows="2" cols="20">
</textarea>
<form>
';
?>
bla bla
</div>
<div class="demo">
<div id="dialogg" title="Потвърждение">
???
</div>
<button id="buttons" >Get back the window</button>
<p id="p">Yet one more Paragraph
<div id="dialog1">
</div>
<div id="xa"></div>
<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding:20px;">
cdgfcgfcg
<form>
<input value="text input" /><br />
<input type="checkbox" />checkbox<br />
<input type="radio" />radio<br />
<select>
<option>select</option>
</select><br /><br />
<textarea>textarea</textarea><br />
</form>
</div><!-- End sample page content -->
</div><!-- End demo -->
<div class="demo-description">
</div><!-- End demo-description -->
</body>
</html>
But with this it shows all windows ,and fadeOut them again????!?!?
Thank you!