Dialog with maximize, minimize, resize, responsive with jquery ui js and extended dialog js

Question

Dialog with maximize, minimize, resize, responsive with jquery ui js and extended dialog js

3.9k views Asked by AtanasBobev At 07 December 2024 at 16:54

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>

Original Q&A

There are 1 answers

**Twisty** · Answer 1 · 2018-02-09 21:36:12

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:

Adding 2 buttons to dialog title bar using jQuery/jQuery UI
Minimize button will have 2 functions:
- should hide the content upon first click
- should restore the content and position upon second click
Maximize button will have 2 functions:
- should expand the dialog to window width (minus scrollbar) and height up first click
- should restore dialog to original position and size upon second click
Close button remains unaffected

Here is a basic, and slightly long winded method to do this:

$(function() {
  function addButtons(dlg) {
    // Define Buttons
    var $close = dlg.find(".ui-dialog-titlebar-close");
    var $min = $("<button>", {
      class: "ui-button ui-corner-all ui-widget ui-button-icon-only ui-window-minimize",
      type: "button",
      title: "Minimize"
    }).insertBefore($close);
    $min.data("isMin", false);
    $("<span>", {
      class: "ui-button-icon ui-icon ui-icon-minusthick"
    }).appendTo($min);
    $("<span>", {
      class: "ui-button-icon-space"
    }).html(" ").appendTo($min);
    var $max = $("<button>", {
      class: "ui-button ui-corner-all ui-widget ui-button-icon-only ui-window-maximize",
      type: "button",
      title: "Maximize"
    }).insertBefore($close);
    $max.data("isMax", false);
    $("<span>", {
      class: "ui-button-icon ui-icon ui-icon-plusthick"
    }).appendTo($max);
    $("<span>", {
      class: "ui-button-icon-space"
    }).html(" ").appendTo($max);
    // Define Function
    $min.click(function(e) {
      if ($min.data("isMin") === false) {
        console.log("Minimize Window");
        $min.data("original-pos", dlg.position());
        $min.data("original-size", {
          width: dlg.width(),
          height: dlg.height()
        });
        $min.data("isMin", true);
        dlg.animate({
          height: '40px',
          top: $(window).height() - 50
        }, 200);
        dlg.find(".ui-dialog-content").hide();
      } else {
        console.log("Restore Window");
        $min.data("isMin", false);
        dlg.find(".ui-dialog-content").show();
        dlg.animate({
          height: $min.data("original-size").height + "px",
          top: $min.data("original-pos").top + "px"
        }, 200);
      }
    });
    $max.click(function(e) {
      if ($max.data("isMax") === false) {
        console.log("Maximize Window");
        $max.data("original-pos", dlg.position());
        $max.data("original-size", {
          width: dlg.width(),
          height: dlg.height()
        });
        $max.data("isMax", true);
        dlg.animate({
          height: $(window).height() + "px",
          width: $(window).width() - 20 + "px",
          top: 0,
          left: 0
        }, 200);
      } else {
        console.log("Restore Window");
        $max.data("isMax", false);
        dlg.animate({
          height: $max.data("original-size").height + "px",
          width: $max.data("original-size").width + "px",
          top: $max.data("original-pos").top + "px",
          left: $max.data("original-pos").top + "px"
        }, 200);
      }
    });
  }

  $('#window').dialog({
    draggable: true,
    autoOpen: true,
    classes: {
      "ui-dialog": "ui-window-options",
      "ui-dialog-titlebar": "ui-window-bar"
    },
    modal: true,
    responsive: true,
  });

  addButtons($(".ui-window-options"));

  $("#winOpener").click(function() {
    $("#window").dialog("open");
  })
});

.ui-window-bar .ui-button {
  position: absolute;
  top: 50%;
  width: 20px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}

.ui-window-bar .ui-window-minimize {
  right: calc(.3em + 40px);
}

.ui-window-bar .ui-window-maximize {
  right: calc(.3em + 20px);
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<a href="#" id="winOpener">Open Window</a>

<div id="window" title="Test Window">window</div>

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.

TechQA.

Dialog with maximize, minimize, resize, responsive with jquery ui js and extended dialog js

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in JQUERY-UI

Popular Questions

Popular Tags

Trending Questions