So i want to have a dialog with maximize, resize, minimize, buttons like windows os at the top right and responsive and draggable functions at the dialog. I'm using jquery, jquery ui and extended dialog frameworks but i can't get functionalities i want. Also the code maximize the dialog at the center but i want full screen maximization. I'm still beginner in jquery and jquery ui so i can't really code on this frameworks.
$('#window').dialog({
draggable: true,
autoOpen: true,
dialogClass: "test",
modal: true,
responsive: true,
buttons: [
{
text: "minimize",
click: function() {
$(this).parents('.ui-dialog').animate({
height: '40px',
top: $(window).height() - 50
}, 200);
}
}]
});
$('#open').click(function() {
$('#window').parents('.ui-dialog').animate({
//set the positioning to center the dialog - 200 is equal to height of dialog
top: ($(window).height()-200)/2,
//set the height again
height: 200
}, 200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<meta charset="utf-8">
<title>AXB OS</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.7.0.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="https://github.com/CrazyTuna/jquery-extendeddialog/blob/master/src/fq-ui.extendeddialog.js"></script>
<head>
</head>
<body>
<div id="window">window</div>
<button id="open" href="javascript: void(0);">maximize</a>
<script>
</script>
<body>
</html>
First thing to note, do not use multiple versions of jQuery. Your example code has 2, 2.1.1 & 1.7.0. You must pick one!
Second, you have HTML Syntax error. When you open a
<button>
, it must have a</button>
to close it, you have</a>
.I didn't know much about the extra library, I didn't need it, and so I dropped it from my example. I made the following assumptions:
Here is a basic, and slightly long winded method to do this:
In the end, we add Min, Max, beside Close in the title bar. Each button we added has a dual function. To restore the position we capture these details using
.data()
to store that detail for later.I assumed
20px
for scroll bar length. This may vary different browsers. One Caveat is that the minimized item will not retain it's position on the "bottom" of the window when scrolling.