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.
<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.
<button id="vex_t1">Test Alert</button>
<script>
var win_cnt = '<p>Welcome to CoursesWeb.net/<br/><em>https://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: .
<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: .
<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>
<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>
<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).<table><tr> <th>Title 1</th> <th>Title 2</th> </tr></table>
.some_class {
line-height: 150%;
}document.getElementById("id_button").onclick = function(){
window.open("http://coursesweb.net/");
}$ar_dir = scandir("dir_name");
var_export($ar_dir);