popup.html
473 lines
| 1 | <!doctype html> |
| 2 | <html> |
| 3 | <head> |
| 4 | <title>Popup demo</title> |
| 5 | <script src="/wp-includes/js/jquery/jquery.js?ver=1.11.3"></script> |
| 6 | </head> |
| 7 | <body class="wp-core-ui"> |
| 8 | |
| 9 | <article> |
| 10 | <h3>Simple Popup</h3> |
| 11 | <p>Display a simple popup without any contents.</p> |
| 12 | <pre>wpmUi.popup().show()</pre> |
| 13 | <a href="#demo01" id="demo01" class="button">Simple Popup</a> |
| 14 | <script> |
| 15 | jQuery(function() { |
| 16 | jQuery('#demo01').click(function() { |
| 17 | var p = wpmUi.popup().show(); |
| 18 | |
| 19 | return false; |
| 20 | }); |
| 21 | }); |
| 22 | </script> |
| 23 | </article> |
| 24 | |
| 25 | <article> |
| 26 | <h3>Customize Default Popup</h3> |
| 27 | <p>Define contents of the popup</p> |
| 28 | <pre>var p = wpmUi.popup() |
| 29 | <b>.title('Hello World') |
| 30 | .content('This is <b>HTML</b> content')</b> |
| 31 | .show();</pre> |
| 32 | <a href="#demo02" id="demo02" class="button">Demo contents</a> |
| 33 | <script> |
| 34 | jQuery(function() { |
| 35 | jQuery('#demo02').click(function() { |
| 36 | var p = wpmUi.popup() |
| 37 | .title('Hello World') |
| 38 | .content('This is <b>HTML</b> content') |
| 39 | .show(); |
| 40 | |
| 41 | return false; |
| 42 | }); |
| 43 | }); |
| 44 | </script> |
| 45 | |
| 46 | <p>Example 2: Display a custom close button inside the popup contents</p> |
| 47 | <pre>var p = wpmUi.popup() |
| 48 | .title('Hello World'<b>, false</b>) <em>// Second param: Show default close button?</em> |
| 49 | .content('This is <b>HTML</b> content. <a class="close">Close!</a>') |
| 50 | .show();</pre> |
| 51 | <a href="#demo02a" id="demo02a" class="button">Custom close button</a> |
| 52 | <script> |
| 53 | jQuery(function() { |
| 54 | jQuery('#demo02a').click(function() { |
| 55 | var p = wpmUi.popup() |
| 56 | .title('Hello World', false) |
| 57 | .content('This is <b>HTML</b> content. <a href="#demo02a" class="close">Close!</a>') |
| 58 | .show(); |
| 59 | |
| 60 | return false; |
| 61 | }); |
| 62 | }); |
| 63 | </script> |
| 64 | |
| 65 | <p>Example 3: Define a custom size for the popup</p> |
| 66 | <pre>var p = wpmUi.popup() |
| 67 | .title('Hello World') |
| 68 | .content('This is <b>HTML</b> content') |
| 69 | <b>.size(300, 400)</b> <em>// width, height</em> |
| 70 | .show();</pre> |
| 71 | <a href="#demo02b" id="demo02b" class="button">Custom popup size</a> |
| 72 | <script> |
| 73 | jQuery(function() { |
| 74 | jQuery('#demo02b').click(function() { |
| 75 | var p = wpmUi.popup() |
| 76 | .title('Hello World') |
| 77 | .content('This is <b>HTML</b> content') |
| 78 | .size(300, 400) |
| 79 | .show(); |
| 80 | |
| 81 | return false; |
| 82 | }); |
| 83 | }); |
| 84 | </script> |
| 85 | |
| 86 | <p>Example 4: Set the popup-size to 'auto'</p> |
| 87 | <pre>var p = wpmUi.popup() |
| 88 | .title('Hello World') |
| 89 | .content('<center>This is <b>HTML</b> content<br>Line 2<br>Line3</center>') |
| 90 | <b>.size(0, 0)</b> <em>// 0 is eqal to 'auto'; you can use either</em> |
| 91 | .show();</pre> |
| 92 | <a href="#demo02c" id="demo02c" class="button">Auto popup size</a> |
| 93 | <script> |
| 94 | jQuery(function() { |
| 95 | jQuery('#demo02c').click(function() { |
| 96 | var p = wpmUi.popup() |
| 97 | .title('Hello World') |
| 98 | .content('<center>This is <b>HTML</b> content<br>Line 2<br>Line3</center>') |
| 99 | .size(0,0) |
| 100 | .show(); |
| 101 | |
| 102 | return false; |
| 103 | }); |
| 104 | }); |
| 105 | </script> |
| 106 | </article> |
| 107 | |
| 108 | <article> |
| 109 | <h3>Make it a modal Popup</h3> |
| 110 | <p>A modal popup displays a dark layer in the background by using the <code>.modal()</code> function</p> |
| 111 | <pre>var p = wpmUi.popup() |
| 112 | .title('Hello World') |
| 113 | .content('This is <b>HTML</b> content') |
| 114 | <b>.modal(true, false)</b> <em>// Params: (1) modal background? (2) Hide when clicked on background?</em> |
| 115 | .show();</pre> |
| 116 | <a href="#demo02" id="demo03" class="button">Make it modal</a> |
| 117 | <script> |
| 118 | jQuery(function() { |
| 119 | jQuery('#demo03').click(function() { |
| 120 | var p = wpmUi.popup() |
| 121 | .title('Hello World') |
| 122 | .content('This is <b>HTML</b> content') |
| 123 | .modal(true, false) |
| 124 | .show(); |
| 125 | |
| 126 | return false; |
| 127 | }); |
| 128 | }); |
| 129 | </script> |
| 130 | </article> |
| 131 | |
| 132 | <article> |
| 133 | <h3>Animate the Popup</h3> |
| 134 | <p>Popups can be animated when they are opened or hidden. Simply use the <code>.animate()</code> function<br> |
| 135 | Note: This will only work when the animation CSS file are loaded via <code>lib3()->ui->add(TheLib_Ui::MODULE_ANIMATION);</code></p> |
| 136 | <pre>var p = wpmUi.popup() |
| 137 | .title('Hello World') |
| 138 | .content('This is <b>HTML</b> content') |
| 139 | .modal(true, false) |
| 140 | <b>.animate('wobble', 'zoomOut')</b> |
| 141 | .show();</pre> |
| 142 | <a href="#demo04" id="demo04" class="button">Animate it</a> |
| 143 | <script> |
| 144 | jQuery(function() { |
| 145 | jQuery('#demo04').click(function() { |
| 146 | var p = wpmUi.popup() |
| 147 | .title('Hello World') |
| 148 | .content('This is <b>HTML</b> content') |
| 149 | .modal(true, false) |
| 150 | .animate('wobble', 'zoomOut') |
| 151 | .show(); |
| 152 | |
| 153 | return false; |
| 154 | }); |
| 155 | }); |
| 156 | </script> |
| 157 | </article> |
| 158 | |
| 159 | <article> |
| 160 | <h3>Confirmation box</h3> |
| 161 | <p>A special layout is built into the popup class, that makes it simple to get a confirmation/choice from the user.<br> |
| 162 | The <code>.confirm()</code> function displays a modal confirmation box inside the popup.</p> |
| 163 | <pre>var p = wpmUi.popup() |
| 164 | .title('Hello World') |
| 165 | .content('This is <b>HTML</b> content') |
| 166 | .modal(true, false) |
| 167 | .animate('wobble', 'zoomOut') |
| 168 | .show(); |
| 169 | <em>// ...</em> |
| 170 | <b>p.confirm</b>({ |
| 171 | 'message': 'Are you sure?', |
| 172 | 'buttons': ['Yes', 'No'], |
| 173 | 'callback': function(button) { p.hide(); alert('Pressed button ' + button); } |
| 174 | })</pre> |
| 175 | <a href="#demo05" id="demo05" class="button">Get confirmation</a> |
| 176 | <script> |
| 177 | jQuery(function() { |
| 178 | jQuery('#demo05').click(function() { |
| 179 | var p = wpmUi.popup() |
| 180 | .title('Hello World') |
| 181 | .content('This is <b>HTML</b> content') |
| 182 | .modal(true, false) |
| 183 | .animate('wobble', 'zoomOut') |
| 184 | .show(); |
| 185 | window.setTimeout(function() { |
| 186 | p.confirm({'message': 'Are you sure?', 'buttons': ['Yes', 'No'], 'callback': function cb(button) { p.hide(); alert('Pressed button ' + button); }}); |
| 187 | }, 1500); |
| 188 | |
| 189 | return false; |
| 190 | }); |
| 191 | }); |
| 192 | </script> |
| 193 | </article> |
| 194 | |
| 195 | <article> |
| 196 | <h3>Custom Popup layouts</h3> |
| 197 | <p>Above demos all use the built-in default layout, but all Popups can have a complete customized layout. Simply specify your custom HTML and CSS code in the constructor.</p> |
| 198 | <pre><b>var template</b> = '<div class="popup"><div class="wrapper"><div class="popup-content"></div><a class="close">Close</a></div><div class="popup-title"></div></div>'; |
| 199 | <b>var css</b> = '.popup{ border: 3px solid red; }'; |
| 200 | |
| 201 | var p = <b>wpmUi.popup( template, css )</b> |
| 202 | .title('This is the title!') |
| 203 | .content('This is <b>HTML</b> content') |
| 204 | .modal(true, false) |
| 205 | .animate('wobble', 'zoomOut') |
| 206 | .show();</pre> |
| 207 | <a href="#demo06" id="demo06" class="button">Custom Layout</a> |
| 208 | <script> |
| 209 | jQuery(function() { |
| 210 | jQuery('#demo06').click(function() { |
| 211 | var template = '<div class="popup"><div class="wrapper"><div class="popup-content"></div><a href="#demo06" class="close">Close</a></div><div class="popup-title"></div></div>'; |
| 212 | var css = '.popup{ border: 3px solid red; }'; |
| 213 | var p = wpmUi.popup( template, css ) |
| 214 | .title('This is the title!') |
| 215 | .content('This is <b>HTML</b> content') |
| 216 | .modal(true, false) |
| 217 | .animate('wobble', 'zoomOut') |
| 218 | .show(); |
| 219 | |
| 220 | return false; |
| 221 | }); |
| 222 | }); |
| 223 | </script> |
| 224 | </article> |
| 225 | |
| 226 | <article> |
| 227 | <h3>Position the Popup</h3> |
| 228 | <p>The default position of a popup is in the center of the screen, but this can be changed with the <code>.snap()</code> function.</p> |
| 229 | <pre>var p = wpmUi.popup() |
| 230 | .title('Hello World') |
| 231 | .content('This is <b>HTML</b> content') |
| 232 | .modal(true, false) |
| 233 | .animate('slideInDown', 'zoomOut') |
| 234 | <b>.snap('top', 'left')</b> <em>// Options: none, top, left, right, bottom</em> |
| 235 | .show();</pre> |
| 236 | <a href="#demo07" id="demo07" class="button">Test positioning</a> |
| 237 | <script> |
| 238 | jQuery(function() { |
| 239 | jQuery('#demo07').click(function() { |
| 240 | var p = wpmUi.popup() |
| 241 | .title('This is the title!') |
| 242 | .content('This is <b>HTML</b> content') |
| 243 | .modal(true, false) |
| 244 | .animate('slideInDown', 'zoomOut') |
| 245 | .snap('top', 'left') |
| 246 | .show(); |
| 247 | |
| 248 | return false; |
| 249 | }); |
| 250 | }); |
| 251 | </script> |
| 252 | |
| 253 | <p><a href="#demo07a" id="demo07a" class="button">Example: top, left, right</a> |
| 254 | <script> |
| 255 | jQuery(function() { |
| 256 | jQuery('#demo07a').click(function() { |
| 257 | var p = wpmUi.popup() |
| 258 | .title('This is the title!') |
| 259 | .content('This is <b>HTML</b> content') |
| 260 | .modal(true, false) |
| 261 | .animate('slideInDown', 'zoomOut') |
| 262 | .snap('top', 'left', 'right') |
| 263 | .show(); |
| 264 | |
| 265 | return false; |
| 266 | }); |
| 267 | }); |
| 268 | </script> |
| 269 | |
| 270 | <p><a href="#demo07b" id="demo07b" class="button">Example: top, left, right, bottom</a> |
| 271 | <script> |
| 272 | jQuery(function() { |
| 273 | jQuery('#demo07b').click(function() { |
| 274 | var p = wpmUi.popup() |
| 275 | .title('This is the title!') |
| 276 | .content('This is <b>HTML</b> content') |
| 277 | .modal(true, false) |
| 278 | .animate('slideInDown', 'zoomOut') |
| 279 | .snap('top', 'left', 'right', 'bottom') |
| 280 | .show(); |
| 281 | |
| 282 | return false; |
| 283 | }); |
| 284 | }); |
| 285 | </script> |
| 286 | </article> |
| 287 | |
| 288 | <article> |
| 289 | <h3>Move Popup instead of hiding it</h3> |
| 290 | <p>Default behavior is, to close the popup when it is closed.<br> |
| 291 | By using the <code>.slidein()</code> function you can specify that the popup should stay visible and behave like a slide-in layer.</p> |
| 292 | <pre>var p = wpmUi.popup() |
| 293 | .title('Hello World') |
| 294 | .content('This is <b>HTML</b> content') |
| 295 | .modal(true, false) |
| 296 | <b>.slidein('up')</b> <em>// Options: none, up, down</em> |
| 297 | .show();</pre> |
| 298 | <a href="#demo08" id="demo08" class="button">Slide-In demo</a> |
| 299 | <script> |
| 300 | jQuery(function() { |
| 301 | jQuery('#demo08').click(function() { |
| 302 | var p = wpmUi.popup() |
| 303 | .title('Hello World') |
| 304 | .content('This is <b>HTML</b> content. <a href="#demo8" class="destroy">Destroy this popup</a>') |
| 305 | .modal(true, false) |
| 306 | .slidein('up') |
| 307 | .show(); |
| 308 | |
| 309 | return false; |
| 310 | }); |
| 311 | }); |
| 312 | </script> |
| 313 | |
| 314 | <p>This second demo uses <code>.snap()</code> to position the popup in the lower right corner, like a common slide-in</p> |
| 315 | <a href="#demo08a" id="demo08a" class="button">Slide-In: bottom/right UP</a> |
| 316 | <script> |
| 317 | jQuery(function() { |
| 318 | jQuery('#demo08a').click(function() { |
| 319 | var p = wpmUi.popup() |
| 320 | .title('Hello World') |
| 321 | .content('This is <b>HTML</b> content. <a href="#demo08a" class="destroy">Destroy this popup</a>') |
| 322 | .snap('right', 'bottom') |
| 323 | .slidein('up') |
| 324 | .show(); |
| 325 | |
| 326 | return false; |
| 327 | }); |
| 328 | }); |
| 329 | </script> |
| 330 | |
| 331 | <p><a href="#demo08b" id="demo08b" class="button">Slide-In: bottom/left DOWN</a></p> |
| 332 | <script> |
| 333 | jQuery(function() { |
| 334 | jQuery('#demo08b').click(function() { |
| 335 | var p = wpmUi.popup() |
| 336 | .title('Hello World') |
| 337 | .content('This is <b>HTML</b> content. <a href="#demo08b" class="destroy">Destroy this popup</a>') |
| 338 | .snap('left', 'bottom') |
| 339 | .slidein('down') |
| 340 | .show(); |
| 341 | |
| 342 | return false; |
| 343 | }); |
| 344 | }); |
| 345 | </script> |
| 346 | |
| 347 | <p><a href="#demo08c" id="demo08c" class="button">Slide-In: top/right DOWN</a></p> |
| 348 | <script> |
| 349 | jQuery(function() { |
| 350 | jQuery('#demo08c').click(function() { |
| 351 | var p = wpmUi.popup() |
| 352 | .title('Hello World') |
| 353 | .content('This is <b>HTML</b> content. <a href="#demo08c" class="destroy">Destroy this popup</a>') |
| 354 | .snap('right', 'top') |
| 355 | .slidein('down') |
| 356 | .show(); |
| 357 | |
| 358 | return false; |
| 359 | }); |
| 360 | }); |
| 361 | </script> |
| 362 | |
| 363 | <p><a href="#demo08d" id="demo08d" class="button">Slide-In: bottom UP</a></p> |
| 364 | <script> |
| 365 | jQuery(function() { |
| 366 | jQuery('#demo08d').click(function() { |
| 367 | var p = wpmUi.popup() |
| 368 | .title('Hello World') |
| 369 | .content('This is <b>HTML</b> content. <a href="#demo08d" class="destroy">Destroy this popup</a>') |
| 370 | .snap('right', 'bottom', 'left') |
| 371 | .slidein('up') |
| 372 | .show(); |
| 373 | |
| 374 | return false; |
| 375 | }); |
| 376 | }); |
| 377 | </script> |
| 378 | |
| 379 | <p><a href="#demo08e" id="demo08e" class="button">Slide-In: left DOWN</a></p> |
| 380 | <script> |
| 381 | jQuery(function() { |
| 382 | jQuery('#demo08e').click(function() { |
| 383 | var p = wpmUi.popup() |
| 384 | .title('Hello World') |
| 385 | .content('This is <b>HTML</b> content. <a href="#demo08e" class="destroy">Destroy this popup</a>') |
| 386 | .snap('left', 'top', 'bottom') |
| 387 | .slidein('down') |
| 388 | .show(); |
| 389 | |
| 390 | return false; |
| 391 | }); |
| 392 | }); |
| 393 | </script> |
| 394 | |
| 395 | <p><a href="#demo08f" id="demo08f" class="button">Slide-In: full-page DOWN</a></p> |
| 396 | <script> |
| 397 | jQuery(function() { |
| 398 | jQuery('#demo08f').click(function() { |
| 399 | var p = wpmUi.popup() |
| 400 | .title('Hello World') |
| 401 | .content('This is <b>HTML</b> content. <a href="#demo08f" class="destroy">Destroy this popup</a>') |
| 402 | .snap('left', 'top', 'bottom', 'right') |
| 403 | .slidein('down') |
| 404 | .show(); |
| 405 | |
| 406 | return false; |
| 407 | }); |
| 408 | }); |
| 409 | </script> |
| 410 | </article> |
| 411 | |
| 412 | <article> |
| 413 | <h3>Custom Slide-in layouts</h3> |
| 414 | <p>This example combines the custom layout with positioning and slidein features.</p> |
| 415 | <pre>var template = '<div class="popup"><div class="wrapper"><div class="popup-content"></div><a class="close">Close</a></div><div class="popup-title"></div></div>'; |
| 416 | var css = '.popup{ box-shadow: 0 0 0 1px #6CE; padding: 5px } ' + |
| 417 | '.popup-title { padding: 10px; margin: 0 auto; position: absolute; bottom: 0; left: 0; right: 0; text-align: center } ' + |
| 418 | '.popup.slidein-collapsed {border: 0; background: transparent; box-shadow: none } ' + |
| 419 | '.popup.slidein-collapsed .popup-title { width: 100px; background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,0.3) }'; |
| 420 | |
| 421 | var p = wpmUi.popup( template, css ) |
| 422 | .title('This is the title!') |
| 423 | .content('This is <b>HTML</b> content - <a class="destroy">Destry popup</a>') |
| 424 | .size(300, 400) |
| 425 | .modal(true, true) |
| 426 | .snap('top') |
| 427 | .slidein('down') |
| 428 | .show();</pre> |
| 429 | <a href="#demo09" id="demo09" class="button">Custom Layout</a> |
| 430 | <script> |
| 431 | jQuery(function() { |
| 432 | jQuery('#demo09').click(function() { |
| 433 | var template = '<div class="popup"><div class="wrapper"><div class="popup-content"></div><a href="#demo09" class="close">Close</a></div><div class="popup-title"></div></div>'; |
| 434 | var css = '.popup{ box-shadow: 0 0 0 1px #6CE; padding: 5px } ' + |
| 435 | '.popup-title { padding: 10px; margin: 0 auto; position: absolute; bottom: 0; left: 0; right: 0; text-align: center } ' + |
| 436 | '.popup.slidein-collapsed {border: 0; background: transparent; box-shadow: none } ' + |
| 437 | '.popup.slidein-collapsed .popup-title { width: 100px; background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,0.3) }'; |
| 438 | var p = wpmUi.popup( template, css ) |
| 439 | .title('This is the title!') |
| 440 | .content('This is <b>HTML</b> content - <a href="#demo09" class="destroy">Destroy popup</a>') |
| 441 | .size(300, 400) |
| 442 | .modal(true, true) |
| 443 | .snap('top') |
| 444 | .slidein('down') |
| 445 | .show(); |
| 446 | |
| 447 | return false; |
| 448 | }); |
| 449 | }); |
| 450 | </script> |
| 451 | </article> |
| 452 | |
| 453 | |
| 454 | <script src="../../js/wpmu-ui.3.js"></script> |
| 455 | <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext" /> |
| 456 | <link rel="stylesheet" type="text/css" href="/wp-admin/css/wp-admin.css" /> |
| 457 | <link rel="stylesheet" type="text/css" href="/wp-includes/css/buttons.css" /> |
| 458 | <link rel="stylesheet" type="text/css" href="/wp-admin/css/common.css" /> |
| 459 | <link rel="stylesheet" type="text/css" href="/wp-includes/css/dashicons.css" /> |
| 460 | <link rel="stylesheet" type="text/css" href="../../css/wpmu-ui.3.css" /> |
| 461 | <link rel="stylesheet" type="text/css" href="../../css/wpmu-html.3.css" /> |
| 462 | <link rel="stylesheet" type="text/css" href="../../css/fontawesome.3.css" /> |
| 463 | <link rel="stylesheet" type="text/css" href="../../css/animate.3.css" /> |
| 464 | <style> |
| 465 | body { overflow: auto; } |
| 466 | article { margin: 10px auto; max-width: 800px; border: 1px solid #E5E5E5; background: #FFF; padding: 20px; } |
| 467 | pre { display: block; background: rgba(0,0,0,0.05); border-left: 3px solid #AAA; border-radius: 4px; padding: 5px; margin: 20px 0; overflow: auto; } |
| 468 | code { display: inline-block; background: rgba(0,0,0,0.05); border-left: 3px solid #AAA; border-radius: 4px; padding: 2px 5px; font-size: 13px; } |
| 469 | article > h3 { margin-top: 0; border-bottom: 1px solid #E5E5E5; padding-bottom: 15px; margin-bottom: 15px; } |
| 470 | pre em { color: #088; } |
| 471 | </style> |
| 472 | </body> |
| 473 | </html> |