Simple Overlay Demo
18 |19 | Simple Overlay can be used in a variety of different ways. Some examples of how to use the plugin are below. All code used is below. 20 |
21 |22 | Callbacks 23 |
24 |25 | The plugin supports the use of callbacks for both when it is displayed and when it is hidden. This allows you to take action after the overlay fires. 26 | Examples would be displaying a custom message, modal dialog, or another prompt. 27 |
28 |29 | For a trivial example, click here. This will add simple modal to the page once the overlay has been displayed. 30 |
31 |32 | Code Used 33 |
34 |
35 | var $modal = $('This is my modal.')
36 | .attr('id', 'modal')
37 | .css({
38 | background: '#fff',
39 | zIndex: 3000,
40 | padding: '10px',
41 | width: '640px',
42 | height: '240px',
43 | margin: '0 auto',
44 | opacity: 1,
45 | position: 'absolute',
46 | top: '10%',
47 | left: '10%'
48 | });
49 |
50 | $('#modal-trigger').click(function(evt) {
51 | evt.preventDefault();
52 | $(this).overlay({
53 | effect: 'fade',
54 | opacity: 0.8,
55 | closeOnClick: true,
56 | onShow: function() {
57 | $('body').append($modal);
58 | },
59 | onHide: function() {
60 | $modal.remove();
61 | },
62 | })
63 | });
64 |
65 | 66 | Using Any Element 67 |
68 |69 | You can trigger the overlay using any element (such as paragraph elements). Click on this sentence for a demo. 70 | Click on the overlay to close it. 71 |
72 |73 | You can trigger overlays by applying it to any HTML element by calling it on any element. 74 |
75 |76 | Code Used 77 |
78 |
79 | $('#paragraph-trigger').click(function() {
80 | $(this).overlay({
81 | closeOnClick: true
82 | });
83 | });
84 |
85 | 86 | Using an Anchor 87 |
88 |
89 | You can display overlays by also using anchor elements. It's helpful to prevent the default action
90 | from occuring before displaying the overlay. Click on this anchor for a demo. The gloss effect was achieved by passing
91 | glossy: true to the plugin options.
92 |
94 | Code Used 95 |
96 |
97 | $('#anchor-trigger').click(function(evt) {
98 | evt.preventDefault();
99 | $(this).overlay({
100 | color: 'red',
101 | closeOnClick: true,
102 | glossy: true
103 | });
104 | });
105 |
106 | 107 | Photo Overlay 108 |
109 |110 | You can also provide an overlay on top of an image. Click on the photo below and notice the overlay come down. Using the onShow callback, you can wire up 111 | an (h/t to @Alex_Morrison for this suggested use :) event handler to prevent right-clicking. 112 |
113 |
115 | 117 | Code Used 118 |
119 |
120 | $('#photo-trigger').click(function() {
121 | $(this).overlay({
122 | color: '#ccc',
123 | effect: 'fade',
124 | glossy: true,
125 | container: '#photo-trigger',
126 | onShow: function() {
127 | $(this).click(function(evt) {
128 | evt.preventDefault();
129 | }).bind('contextmenu', function(evt) {
130 | evt.preventDefault();
131 | });
132 | }
133 | });
134 | });
135 |
136 | 137 | Customer Overlay Class 138 |
139 |140 | You can also used an overlay class already defined in your app from another library (i.e. jQuery UI). Click on the photo below to see the overlay class form jQuery UI used. 141 |
142 |
144 | 146 | Code Used 147 |
148 |
149 | $('#photo-trigger-2').click(function() {
150 | $(this).overlay({
151 | overlayClass: 'ui-widget-overlay',
152 | effect: 'fade',
153 | container: '#photo-trigger-2'
154 | });
155 | });
156 |
157 |