插件描述：jQuery弹出层 三种弹出效果 以侧试各个浏览器兼容都OK.
jQuery弹出层 三种弹出效果 以侧试各个浏览器兼容都OK.
html部分
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 | <meta charset="utf-8"><title> Reveal Demo</title><!-- Attach our CSS --><link rel="stylesheet" href="reveal.css"><!-- Attach necessary scripts --><!--<script type="text/javascript" src="jquery-1.4.4.min.js"></script>--> <script type="text/javascript" src="jquery.reveal.js"></script> <style type="text/css">body { font-family: "HelveticaNeue", "Helvetica-Neue", "Helvetica", "Arial", sans-serif; }.big-link { display: block; margin-top: 100px; text-align: center; font-size: 70px; color: #06f; }</style><a href="#" class="big-link" data-reveal-id="myModal"> jquery1 </a> <a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade"> jquery2 </a> <a href="#" class="big-link" data-reveal-id="myModal" data-animation="none"> jquery3 </a><div id="myModal" class="reveal-modal"> <h1> jquery导出层 </h1> <p> This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS. </p><a class="close-reveal-modal">×</a></div> |
reveal.css
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 | .reveal-modal-bg {position: fixed;height: 100%;width: 100%;background: #000;background: rgba(0,0,0,.8);z-index: 100;display: none;top: 0;left: 0;}.reveal-modal {visibility: hidden;top: 100px;left: 50%;margin-left: -300px;width: 520px;background: #eee url(modal-gloss.png) no-repeat -200px -80px;position: absolute;z-index: 101;padding: 30px 40px 34px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);-box-shadow: 0 0 10px rgba(0,0,0,.4);}.reveal-modal.small { width: 200px; margin-left: -140px;}.reveal-modal.medium { width: 400px; margin-left: -240px;}.reveal-modal.large { width: 600px; margin-left: -340px;}.reveal-modal.xlarge { width: 800px; margin-left: -440px;}.reveal-modal .close-reveal-modal {font-size: 22px;line-height: .5;position: absolute;top: 8px;right: 11px;color: #aaa;text-shadow: 0 -1px 1px rbga(0,0,0,.6);font-weight: bold;cursor: pointer;} |
jquery.reveal.js
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 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 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 | (function($) { $('a[data-reveal-id]').live('click', function(e) { e.preventDefault(); var modalLocation = $(this).attr('data-reveal-id'); $('#' + modalLocation).reveal($(this).data()); }); $.fn.reveal = function(options) { var defaults = { animation: 'fadeAndPop', //fade, fadeAndPop, none animationspeed: 300, //how fast animtions are closeonbackgroundclick: true, //if you click background will modal close? dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal }; //Extend dem' options var options = $.extend({}, defaults, options); return this.each(function() { var modal = $(this), topMeasure = parseInt(modal.css('top')), topOffset = modal.height() + topMeasure, locked = false, modalBG = $('.reveal-modal-bg'); if (modalBG.length == 0) { modalBG = $(' ').insertAfter(modal); } //Entrance Animations modal.bind('reveal:open', function() { modalBG.unbind('click.modalEvent'); $('.' + options.dismissmodalclass).unbind('click.modalEvent'); if (!locked) { lockModal(); if (options.animation == "fadeAndPop") { modal.css({ 'top': $(document).scrollTop() - topOffset, 'opacity': 0, 'visibility': 'visible' }); modalBG.fadeIn(options.animationspeed / 2); modal.delay(options.animationspeed / 2).animate({ "top": $(document).scrollTop() + topMeasure + 'px', "opacity": 1 }, options.animationspeed, unlockModal()); } if (options.animation == "fade") { modal.css({ 'opacity': 0, 'visibility': 'visible', 'top': $(document).scrollTop() + topMeasure }); modalBG.fadeIn(options.animationspeed / 2); modal.delay(options.animationspeed / 2).animate({ "opacity": 1 }, options.animationspeed, unlockModal()); } if (options.animation == "none") { modal.css({ 'visibility': 'visible', 'top': $(document).scrollTop() + topMeasure }); modalBG.css({ "display": "block" }); unlockModal() } } modal.unbind('reveal:open'); }); //Closing Animation modal.bind('reveal:close', function() { if (!locked) { lockModal(); if (options.animation == "fadeAndPop") { modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); modal.animate({ "top": $(document).scrollTop() - topOffset + 'px', "opacity": 0 }, options.animationspeed / 2, function() { modal.css({ 'top': topMeasure, 'opacity': 1, 'visibility': 'hidden' }); unlockModal(); }); } if (options.animation == "fade") { modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); modal.animate({ "opacity": 0 }, options.animationspeed, function() { modal.css({ 'opacity': 1, 'visibility': 'hidden', 'top': topMeasure
|