Query UI. Widgets. Dialog Windows

Occasionally, a web programmer will face the difficult task of choosing whether to display something in a window as a notification or as a registration form.
Finally, there is a simple and functional tool! Widget jQuery UI - Dialog.
Generally - things got a lot more simpler. Almost a like in a fairy tale! :)

Download the jQuery UI and connect the whole thing:


To warm up, let's create a "simple window" - with no cool tricks. For this, we need only one simple HTML line:

And maybe a bit of javascript code:

$("#dialog").dialog({autoOpen: false});

autoOpen is an optional parameter, we need it for visualization (to fully understand what it is really used for, see below). Now, to open or close the window simply input the following commands, respectively:

$("#dialog").dialog("open");
$("#dialog").dialog("close");

And now this is what we get - Example 1.

So, we have a window, it's tasteless and unremarkable... Let's fix this preposterous error.
Let's start by, let's say, changing the title (or rather adding it), changing its pop up coordinates, and... Well, and modality mode just to complete the picture.
JS:

$("#dialog").dialog({
  title: "Warning!!!", //title
  position: [725,200], //location of the title window [left spacing , upper spacing]
  modal: true //if boolean function equals true - then the window is modal, if false - then it’s not
});

Example 2.

In the parameter position, you can also use these constructions:

position: ["left"]
position: ["left", "top"]

Well, now the window looks more or less pretty. Add functionality - with the help of buttons.
JS:

$("#dialog").dialog({
  title: "Warning!!!", //title
  width: 450, //width
  height: 300, //height
  modal: true, //if true – it’s a modal window, if false - no
  buttons: {
    "Add text to dialog window": function() { $("#dialog").text("wow! text!"); },
    "Close": function() { $(this).dialog("close"); }
  }
});

Example 3.

As you may have noticed I added two more parameters - width and height.
These parameters are simple ones, but you probably haven't heard about them :) Well we are probably done with the simple ones. That's how we smoothly approach the events ...
Let us start, as always - JS:

$("#dialog").dialog({
  dragStop: function(event, ui) { // if the window is left as it was after it was dragged, then
    alert("ui.offset.top = " + ui.offset.top + // calculating the coordinate of the window "top"
    "\nui.offset.left = " + ui.offset.left); // calculating the coordinate of the left side of the window
  }
});

This is it. The one and only - Example 4.

And the last one - the boring part... Basic info on all the options, methods and events. Use it!

Options:

  • autoOpen - by default this option is true, that means the dialog window will appear automatically if you call the dialog method. If you set the option to false, the dialog window will be dormant and to make it visible again you'll need to use dialog ('open');
  • bgiframe - by default - false. If this option is set to true (you will need an additional plug-in to connect bgIframe), the problem in IE6 will be fixed, where the select elements are placed on top of other elements, regardless of the z-index value. Perhaps in future versions, connecting the plug-in will not be necessary;
  • buttons - in this option an object is passed, where you can set buttons, which will be displayed in the dialog window, and connect them with the callback-functions;
  • closeOnEscape - by default this option is set to true and closes the dialog window when you press the "Escape". By setting to false, you can prevent this action;
  • dialogClass - specified in this option, the name of the class (or classes) will be applied to the dialog window for additional design;
  • draggable - the default is true, which makes it possible to drag the dialog window. If set to false, dragging the dialog becomes impossible;
  • height - by default this option is set to auto, and the height of the dialog window is determined by its content. You can express the height of the dialog window in pixels. For example: height: 300. In case, the content exceeds the specified size, a vertical scroll bar will appear;
  • hide - in this option, you can determine the effect which will be used when closing the dialog window. For example: hide: 'slide'. By default the value is null, i.e. no effects used;
  • maxHeight - maximum height to which the dialog window can be resized, in pixels;
  • maxWidth - the maximum width to which the dialog window can be resized, in pixels;
  • minHeight - the minimum height to which the dialog window can be resized, in pixels;
  • minWidth - the minimum width to which the dialog window can be resized, in pixels;
  • modal - if this option is set to true, the dialog will become modal. Meaning, that the other elements on the Web page will be blocked, and the user won't be able to interact with them. This will be achieved by creating an additional layer beneath the dialogue window, but above the other elements of a Web page;
  • position - the value of this option can be either a string or an array, which determine the initial position of the dialog window. Possible values: 'center', 'left', 'right', 'top', 'bottom'. The other option - to use the same values within the array. For example ['right', 'top'] in order to position the dialog window in the upper right corner;
  • resizable - by default is true, which makes it possible to resize the dialog window. If set to false, then changing the size would become impossible;
  • show - in this option, you can determine the effect which will be used when opening a dialogue. For example: show: 'slide'. The default value is null, i.e. no effects used;
  • stack - by default this option is set to true, which allows the window (if you use multiple dialog windows on one web page), to receive focus, to be displayed on top of others. By setting this option to false you can cancel this action for a selected window;
  • title - the value of the option can be a string, which can be used to change the title of the window specified in the HTML-markup;
  • width - the width of the initial dialog, in pixels. By default the value is 300;
  • zIndex - the value of z-index dialog window. By default the value is 1000.

Methods:

  • destroy - .dialog ("destroy") removes all the functions of the widget Dialog. Returns the elements to the state prior to initialization;
  • disable - .dialog ("disable") temporarily disables all the functions of the widget. In order to re-enable it, use the method enable;
  • enable - .dialog ("enable") enables all the functions of the widget, if prior disabled by using the method disable;
  • option - .dialog ("option", optionName, [value]) by using this method you can get or set the value of any widget option after they were initialized;
  • close - .dialog ("close") closes the dialog window;
  • isOpen - .dialog ("isOpen") this method will return true, if the dialog window is already opened;
  • moveToTop - .dialog ("moveToTop") puts a dialog window on top of other dialog windows, if there are two or more of them;
  • open - .dialog ("open") opens a dialog window.

Events:

  • beforeClose - occurs before closing the dialog window (if the related event function will return as false - this will prevent closing the dialogue window);
  • open - occurs when the dialog window is opened;
  • focus - occurs when the dialog window receives focus;
  • dragStart - occurs when dragging the dialog window;
  • drag - occurs every time when dragging the dialog window;
  • dragStop - occurs after the dialog window was stopped to be dragged;
  • resizeStart - occurs in the beginning of resizing the dialog window;
  • resize - occurs every time when resizing the dialog window;
  • resizeStop - occurs after the dialog window was resized;
    • close - occurs when the dialog window was successfully closed.

Continue reading here: How to disable text selection using user-select property in CSS

Was this article helpful?

0 0