Examples Vex - Modal Windows

Vex is a modern jQuery plugin for creating stylish and feature-rich modal windows /dialogs for your web pages, with minimal coding. Has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds.
- It can be used to replace Alert, Confirm, and Prompt with Modal Dialog Windows, with animation and 6 different CSS themes.
- Can open multiple dialogs at once and close them individually or all at once.
- Has built in CSS spinner for asynchronous dialogs.


• To DOWNLOAD this script, click: - version: 1.3.5 (260 KB).

Installation

1. First, to use this plugin, copy the "vexjq" folder with all its files on your server. The script comes with jQuery 1.10.2 ("jquery.js" in "vexjq/" directory).
2. Include these files in the <head> zone of your web page: Vex css styles, jQuery library, the Vex jQuery plugin.
<link rel="stylesheet" type="text/css" href="vexjq/vex_all.css" />
<script type="text/javascript" src="vexjq/jquery.js"></script>
<script type="text/javascript" src="vexjq/vex.combined.js"></script>
3. Then, create a script in which define your Content for Modal Window, Specify the CSS theme, and call a "vex.dialog" method to show the content in modal window.
<script>
var win_cnt = '<div>Content</div>';     // Defines the content
vex.defaultOptions.className = 'vex-theme-default';     // specifies the css theme

// calls the vex.open() method to display the content
vex.open({
  content: win_cnt
});
</script>
• The CSS theme can also be specified in the vex methods, with the: className: 'vex-theme-...' property.

- Vex Dialog plugin has 4 main API methods:
    • vex.dialog.alert(stringOrOptions) - Creates an Alert modal window. The argument can be a string with the content displayed in the Alert, or a JSON object with options (if you want to advanced customize the modal window, or to call a callback function).
    • vex.dialog.confirm(options) - Creates a Confirm modal window. The argument is a JSON object with options.
    • vex.dialog.prompt(options) - Creates a Prompt modal window. The argument is a JSON object with options.
    • vex.dialog.open(options) - Creates a custom modal window. The argument is a JSON objects with the content /message and other options to customize the modal window.

Examples Vex - Modal Windows

Here is a few examples with Vex jQuery plugin.

1. Simple Alert dialog box, with default theme: .
- Code:
<button id="vex_t1">Test Alert</button>
<script>
var win_cnt = '<p>Welcome to CoursesWeb.net/<br/><em>http://coursesweb.net/</em></p>';     // Defines the content
vex.defaultOptions.className = 'vex-theme-default';     // specifies the css theme

// sets a function to be called when we need it (receives the string content)
var vex_alert1 = function(content) {
  // calls the vex.dialog.alert() method to display the content
  vex.dialog.alert(content)
};

// registers click event to #vex_t1, to call the vex_alert1() function
$('body').on('click', '#vex_t1', function(){ vex_alert1(win_cnt); } );
</script>
2. Confirm dialog box, with "vex-theme-os", and a callback function: .
- Code:
<button id="vex_t2">Test Confirm</button>
<script>
var vex_msg1 = 'Do you like this jQuery plugin?';   // message in Confirm window
vex.defaultOptions.className = 'vex-theme-os';     // specifies the css theme

// sets a function to be called when we need it (receives the string content)
var vex_confirm1 = function(msg) {
  // calls the vex.dialog.confirm() method to display the content
  vex.dialog.confirm({
  message: msg,     // adds the content message

  // calls a callback function, with simple Alert message according to value
  callback: function(value) {
    var re = (value == true) ? 'Thank you' : 'Try make a better one';
    return alert(re);
  }
});
};

// registers click event to #vex_t2, to call the vex_confirm1() function
$('body').on('click', '#vex_t2', function(){ vex_confirm1(vex_msg1); } );
</script>
3. Prompt dialog box, with "vex-theme-flat-attack" added in prompt() method, and a callback function: .
- Code:
<button id="vex_t3">Test Prompt</button>
<script>
var vex_msg2 = 'Who are .. you?';   // message in the modal window

// sets a function to be called when we need it (receives the string content)
var vex_prompt1 = function(msg) {
  // calls the vex.dialog.prompt() method to display the content
  vex.dialog.prompt({
  className: 'vex-theme-flat-attack',    // set css theme for this dialog box
  message: msg,             // adds the content message
  placeholder: 'I am',      // text displayed in Prompt input field

  // calls a callback function, with simple Alert message
  // if the user adds data in the input field, "value" contains that text, if Cancel, value is false,
  // if OK with no data added in input field, value is an object with empty "vex" property
  callback: function(value) {
    if(value == false) var re = 'GOoD';
    else if(value.vex == '') var re = 'GOoD no person';
    else var re = value +' - Have a GOoD life.';
    return alert(re);
  }
});
};

// registers click event to #vex_t3, to call the vex_prompt1() function
$('body').on('click', '#vex_t3', function(){ vex_prompt1(vex_msg2); } );
</script>

Advanced

- The vex.dialog.open() method can be used to open a modal dialog window with cumstom buttons and input fields.
- The vex.open() method can be used to open a modal window with HTML content and Close (X) button.

4. In the following example we have a modal dialog box with custom Yes /No buttons (Next, and Close), opened with vex.dialog.open(). When the Next button is pressed, a callback function opens another modal window, with vex.open(). Then, it is opened an Alert modal window.

    - Code:
<button id="vex_t4">Demo</button>
<script>
vex.defaultOptions.className = 'vex-theme-os';     // specifies the css theme

// sets a function to open the 1st window
var vex_open1 = function() {
  // calls the vex.dialog.open() method to display the content
  vex.dialog.open({
    message: '<div>Click Next to see the second window</div><br/>Here can be an image, table, iframe ...',     // sets a primary content

    // sets custom buttons
    buttons: [
      $.extend({}, vex.dialog.buttons.YES, { text: 'Next' }),     // For Yes
      $.extend({}, vex.dialog.buttons.NO, { text: 'Close' })      // For Cancel
    ],

    // ecalls a callback function when the modal window is closed
    // opens another window
    callback: function(value) {
      if(value == true) return vex_open2();
    }
  });
}

// sets a function for the 2nd modal window
var vex_open2 = function() {
  // calls the vex.open() method to display the content
  vex.open({
    content: '<div>Content-1 in "content" property</div>',     // sets a primary content
    className: 'vex-theme-default',       // change the css theme

    // append another content after the dialog has opened
    // passing the content2 as argument, to include it in the modal window (after the primary content)
    afterOpen: function($vexContent) {
      return $vexContent.append(content2);
    },

    // openss a Modal Alert Window after this window is closed
    afterClose: function() {
      return vex.dialog.alert('Thany You');
    }
  });
}

// HTML content appended in the 2nd modal window
var content2 = '<p>HTML content appended from separated variable.</p><br/>Here can be an image, table, iframe ...';

// registers click event to #vex_t4, to call the vex_open1() function
$('body').on('click', '#vex_t4', function(){ vex_open1(); } );
</script>

5. This example opens two modal windows same time, created with vex.open().
    - Code:
<button id="vex_t5">Demo</button>
<script>
vex.defaultOptions.className = 'vex-theme-os';     // sets the css theme

// sets a function to open the modal windows
var vex_open = function() {
  // this will be the 2nd modal box
  vex.open({
    content: '<div>Content modal box 2</div>Here can be an image, table, iframe.',

    // change css default options to show the window in different location
    css: {'margin':'10% 15% 0 auto'}
  });

  // calls the vex.open() method again to display another modal window
  vex.open({
    content: '<div>Content modal window 1</div>Here can be an image, table, iframe.',

    // change css default options to show the window-content in different location
    cssContent: {'position':'absolute', 'margin':'10% 15% 0 auto'}
  });
}

// registers click event to #vex_t5, to call the vex_open() function
$('body').on('click', '#vex_t5', function(){ vex_open(); } );
</script>
- For other advanced options and examples, see the documentation from Vex Home page, and in the archive with this jQuery plugin (a Download button is at the beginning of this page).

• The Vex Dialogs home page is at: http://github.hubspot.com/vex/

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Vex - Modal Windows jQuery plugin

Last accessed pages

  1. The Rise Of Atlantis (12132)
  2. JavaScript code and PHP (19892)
  3. Insert, Select and Update NULL value in MySQL (25324)
  4. innerHTML in PHP (6400)
  5. Bubbles3 (52204)

Popular pages this month

  1. Flash Games - Free online Games (1930)
  2. Qwop (1474)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1331)
  4. Tunnel Rush (1259)
  5. Drag Racer V3 (979)