Scribd Logo
Upload

Welcome to Scribd!

  • Trigger

    Uploaded by

    Fredy E. Rojas
    14 views2 pages
    This document demonstrates using jQuery Tools to create an overlay dialog box on a webpage. When the page loads, a "Facebox" overlay is automatically opened containing some sample content and close buttons. The overlay can be closed by clicking the close button or hitting ESC. It is styled with a semi-transparent border and customizable top position and mask options. Clicking a button triggers programmatically opening the overlay again.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document demonstrates using jQuery Tools to create an overlay dialog box on a webpage. When the page loads, a "Facebox" overlay is automatically opened containing some sample content and close buttons. The overlay can be closed by clicking the close button or hitting ESC. It is styled with a semi-transparent border and customizable top position and mask options. Clicking a button triggers programmatically opening the overlay again.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views2 pages

    Trigger

    Uploaded by

    Fredy E. Rojas
    This document demonstrates using jQuery Tools to create an overlay dialog box on a webpage. When the page loads, a "Facebox" overlay is automatically opened containing some sample content and close buttons. The overlay can be closed by clicking the close button or hitting ESC. It is styled with a semi-transparent border and customizable top position and mask options. Clicking a button triggers programmatically opening the overlay again.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    http://jquerytools.org/demos/overlay/trigger.

    htm

    view-source:http://jquerytools.org/demos/overlay/trigger.htm

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

    <!DOCTYPE html> <html> <!-This is a jQuery Tools standalone demo. Feel free to copy/paste. http://flowplayer.org/tools/demos/ Do *not* reference CSS files and images from flowplayer.org when in production Enjoy! --> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> <!-- standalone page styling (can be removed) --> <link rel="shortcut icon" href="/media/img/favicon.ico"> <link rel="stylesheet" type="text/css" href="/media/css/standalone.css"/> <style> #facebox { /* overlay is hidden before loading */ display:none; /* standard decorations */ width:400px; border:10px solid #666; /* for modern browsers use semi-transparent color on the border. nice! */ border:10px solid rgba(82, 82, 82, 0.698); /* hot CSS3 features for mozilla and webkit-based browsers (rounded borders) */ -moz-border-radius:8px; -webkit-border-radius:8px; } #facebox div { padding:10px; border:1px solid #3B5998; background-color:#fff; font-family:"lucida grande",tahoma,verdana,arial,sans-serif } #facebox h2 { margin:-11px; margin-bottom:0px; color:#fff; background-color:#6D84B4; padding:5px 10px; border:1px solid #3B5998; font-size:20px; } </style> <!--[if IE]> <style type="text/css"> .facebox { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#333333,endColorstr=#333333); zoom: 1; } </style> <![endif]--> </head> <body><button id="open_now">Open Again</button> <!-- facebook dialog --> <div id="facebox">

    1 de 2

    10/09/2012 08:12 p.m.

    http://jquerytools.org/demos/overlay/trigger.htm

    view-source:http://jquerytools.org/demos/overlay/trigger.htm

    69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123

    <div> <h2>Facebox</h2> <p> This dialog is opened programmatically when the page loads. There is no need for a trigger element. </p> <form> <input type="file" /> </form> <p style="color:#666"> To close, click the Close button or hit the ESC key. </p> <!-- yes/no buttons --> <p> <button class="close"> Close </button> </p> </div> </div> <script> $(document).ready(function() { $("#open_now").click(function() { $("#facebox").overlay().load(); }); // select the overlay element - and "make it an overlay" $("#facebox").overlay({ // custom top position top: 260, // some mask tweaks suitable for facebox-looking dialogs mask: { // you might also consider a "transparent" color for the mask color: '#fff', // load mask a little faster loadSpeed: 200, // very transparent opacity: 0.5 }, // disable this for modal dialog-type of overlays closeOnClick: false, // load it immediately after the construction load: true }); }); </script> </body> </html>

    2 de 2

    10/09/2012 08:12 p.m.

    You might also like