Customizable jQuery Modal Window Plugin SemanticWP Modal - Download Customizable jQuery Modal Window Plugin - SemanticWP Modal

Download Customizable jQuery Modal Window Plugin – SemanticWP Modal

By Posted on

This time I will share jQuery Plugin and tutorial about Customizable jQuery Modal Window Plugin – SemanticWP Modal, hope it will help you in programming stack.

Customizable jQuery Modal Window Plugin SemanticWP Modal - Download Customizable jQuery Modal Window Plugin - SemanticWP Modal
File Size: 31.6 KB
Views Total: 923
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



Just another jQuery modal plugin helps you embed dynamic and static Html contents into a flexible, customizable and themeable modal popup windows.

Features:

  • Supports remote data source via Ajax request, with an AJAX loading indicator.
  • Supports long content with browser scrollbar enabled.
  • Custom fullcreen overlay.
  • Custom open / close animations.
  • Custom modal templates.
  • Press the ESC or click on the overlay to close the modal.
  • Callback functions.
  • 2 built-in themes: dark and light. 
  • Can be used to toggle the visible of your block content

How to use it:

1. Load jQuery library and the jQuery SemanticWP Modal plugin’s files in the document.

view source
1 <!-- jQuery -->
2 <script src="jquery-1.11.3.min.js"></script>
3  
4 <!-- jQuery SemanticWP Modal -->
5 <script src="path/to/jquery.semanticwp-modal.js"></script>
6 <link rel="stylesheet" href="path/to/jquery.semanticwp-modal.css">

2. Load a theme CSS of your choice into the document.

view source
1 <link rel="stylesheet" href="path/to/light.css">
2 <!-- OR -->
3 <link rel="stylesheet" href="path/to/dark.css">

3. Create a basic modal window triggered by an inline element.

view source
1 <span id="#example1" onclick="$('#exampleModal1').swpmodal()">Basic Demo</span>
2 <div class="g-hidden">
3   <div class="box-modal" id="exampleModal1">
4     <div class="box-modal_close swpmodal-close">&times;</div>
5     Modal Content Goes Here
6   </div>
7 </div>

4. Load an external data source into the modal window using AJAX.

view source
1 $.swpmodal({
2   type: 'ajax',
3   url: 'ajax_example.html'
4 });

5. Full plugin options.

view source
01 // ajax or html
02 type: 'html',
03  
04 // modal content
05 content: '',
06  
07 // AJAX options
08 url: '',
09 ajax: {},
10 ajax_request: null,
11  
12 // ESC key to close
13 closeOnEsc: true,
14  
15 // Click on the overlay to close
16 closeOnOverlayClick: true,
17  
18 clone: false,
19  
20 // custom overlay
21 overlay: {
22   block: undefined,
23   tpl: '<div class="swpmodal-overlay"></div>',
24   css: {
25     backgroundColor: '#000',
26     opacity: .6
27   }
28 },
29  
30 // custom modal container
31 container: {
32   block: undefined,
33   tpl: '<div class="swpmodal-container"><table class="swpmodal-container_i"><tr><td class="swpmodal-container_i2"></td></tr></table></div>'
34 },
35  
36 wrap: undefined,
37 body: undefined,
38  
39 // custom error modal
40 errors: {
41   tpl: '<div class="swpmodal-error swpmodal-close"></div>',
42   autoclose_delay: 2000,
43   ajax_unsuccessful_load: 'Error'
44 },
45  
46 // custom open / close animations.
47 openEffect: {
48   type: 'fade', // fade or none
49   speed: 400 // animation speed
50 },
51  
52 closeEffect: {
53   type: 'fade',
54   speed: 400
55 },
56  
57 // callbacks
58 beforeOpen: $.noop,
59 afterOpen: $.noop,
60 beforeClose: $.noop,
61 afterClose: $.noop,
62 afterLoading: $.noop,
63 afterLoadingOnShow: $.noop,
64 errorLoading: $.noop

Change log:

v1.0.1 (2015-05-22)

  • fixed for z-index

This awesome jQuery plugin is developed by vjik. For more Advanced Usages, please check the demo page or visit the official website.




source : jqueryscript.net

Related posts: