早上好！
我正在使用来自Eric Martin的jQuery的SimpleModal插件.目前,我正在使用iframe加载模式以加载我按预期工作的请求页面.我想要实现的是一个Loading … spinner,它在内容加载时显示.
我正在加载我的模态如下：
jQuery(function ($) {
// Load dialog on click
$('.basic').click(function (e) {
var src = "http://localhost" + $(this).attr("href");
$.modal('<iframe id="details" class="so" src="' + src + '" height="500" width="500" style="border:0">',{
closeHTML: "<a title='Close' class='modalCloseImg simplemodal-close'></a>",containerId: "simplemodal-container",overlayId: "simplemodal-overlay",overlayClose: true
});
return false;
});
});
我有一个为我的模态容器设置的背景图像,它立即显示.我肯定更喜欢在这里展示一个加载微调器.
解决方法
我正在使用
spin.js的略微扩展版本,用于漂亮的旋转器和模态旋转器覆盖.它可以简单地用于任何元素：
$('#ELEMENT_ID').spin()
或模态旋转器：
$('#ELEMENT_ID').spin("modal")
这是spin.min.js,包括jQuery扩展和modal spinners的一些默认选项：
//fgnass.github.com/spin.js#v1.2.6
!function(e,t,n){function o(e,n){var r=t.createElement(e||"div"),i;for(i in n)r[i]=n[i];return r}function u(e){for(var t=1,n=arguments.length;t<n;t++)e.appendChild(arguments[t]);return e}function f(e,n,r){var o=["opacity",~~(e*100),r].join("-"),u=.01+n/r*100,f=Math.max(1-(1-e)/t*(100-u),e),l=s.substring(0,s.indexOf("Animation")).toLowerCase(),c=l&&"-"+l+"-"||"";return i[o]||(a.insertRule("@"+c+"keyframes "+o+"{"+"0%{opacity:"+f+"}"+u+"%{opacity:"+e+"}"+(u+.01)+"%{opacity:1}"+(u+t)%100+"%{opacity:"+e+"}"+"100%{opacity:"+f+"}"+"}",a.cssRules.length),i[o]=1),o}function l(e,t){var i=e.style,s,o;if(i[t]!==n)return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(o=0;o<r.length;o++){s=r[o]+t;if(i[s]!==n)return s}}function c(e,t){for(var n in t)e.style[l(e,n)||n]=t[n];return e}function h(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)e[i]===n&&(e[i]=r[i])}return e}function p(e){var t={x:e.offsetLeft,y:e.offsetTop};while(e=e.offsetParent)t.x+=e.offsetLeft,t.y+=e.offsetTop;return t}var r=["webkit","Moz","ms","O"],i={},a=function(){var e=o("style",{type:"text/css"});return u(t.getElementsByTagName("head")[0],e.sheet||e.styleSheet}(),d={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto"},v=function m(e){if(!this.spin)return new m(e);this.opts=h(e||{},m.defaults,d)};v.defaults={},h(v.prototype,{spin:function(e){this.stop();var t=this,n=t.opts,r=t.el=c(o(0,{className:n.className}),{position:"relative",width:0,zIndex:n.zIndex}),i=n.radius+n.length+n.width,u,a;e&&(e.insertBefore(r,e.firstChild||null),a=p(e),u=p(r),c(r,{left:(n.left=="auto"?a.x-u.x+(e.offsetWidth>>1):parseInt(n.left,10)+i)+"px",top:(n.top=="auto"?a.y-u.y+(e.offsetHeight>>1):parseInt(n.top,10)+i)+"px"})),r.setAttribute("aria-role","progressbar"),t.lines(r,t.opts);if(!s){var f=0,l=n.fps,h=l/n.speed,d=(1-n.opacity)/(h*n.trail/100),v=h/n.lines;(function m(){f++;for(var e=n.lines;e;e--){var i=Math.max(1-(f+e*v)%h*d,n.opacity);t.opacity(r,n.lines-e,i,n)}t.timeout=t.el&&setTimeout(m,~~(1e3/l))})()}return t},stop:function(){var e=this.el;return e&&(clearTimeout(this.timeout),e.parentNode&&e.parentNode.removeChild(e),this.el=n),this},lines:function(e,t){function i(e,r){return c(o(),{position:"absolute",width:t.length+t.width+"px",height:t.width+"px",background:e,BoxShadow:r,transformOrigin:"left",transform:"rotate("+~~(360/t.lines*n+t.rotate)+"deg) translate("+t.radius+"px"+",0)",borderRadius:(t.corners*t.width>>1)+"px"})}var n=0,r;for(;n<t.lines;n++)r=c(o(),top:1+~(t.width/2)+"px",transform:t.hwaccel?"translate3d(0,0)":"",opacity:t.opacity,animation:s&&f(t.opacity,t.trail,t.lines)+" "+1/t.speed+"s linear infinite"}),t.shadow&&u(r,c(i("#000","0 0 4px #000"),{top:"2px"})),u(e,u(r,i(t.color,"0 0 1px rgba(0,.1)")));return e},opacity:function(e,n){t<e.childNodes.length&&(e.childNodes[t].style.opacity=n)}}),function(){function e(e,t){return o("<"+e+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',t)}var t=c(o("group"),{behavior:"url(#default#VML)"});!l(t,"transform")&&t.adj?(a.addRule(".spin-vml","behavior:url(#default#VML)"),v.prototype.lines=function(t,n){function s(){return c(e("group",{coordsize:i+" "+i,coordorigin:-r+" "+ -r}),{width:i,height:i})}function l(t,o){u(a,u(c(s(),{rotation:360/n.lines*t+"deg",left:~~i}),u(c(e("roundrect",{arcsize:n.corners}),{width:r,height:n.width,left:n.radius,top:-n.width>>1,filter:o}),e("fill",{color:n.color,opacity:n.opacity}),e("stroke",{opacity:0}))))}var r=n.length+n.width,i=2*r,o=-(n.width+n.length)*2+"px",a=c(s(),top:o,left:o}),f;if(n.shadow)for(f=1;f<=n.lines;f++)l(f,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(f=1;f<=n.lines;f++)l(f);return u(t,a)},v.prototype.opacity=function(e,r){var i=e.firstChild;r=r.shadow&&r.lines||0,i&&t+r<i.childNodes.length&&(i=i.childNodes[t+r],i=i&&i.firstChild,i&&(i.opacity=n))}):s=l(t,"animation")}(),typeof define=="function"&&define.amd?define(function(){return v}):e.Spinner=v}(window,document);
var default_opts = {
lines: 9,length: 2,width: 3,radius: 8,corners: 1,rotate: 0,color: '#555',speed: 1,trail: 47,shadow: false,hwaccel: false,className: 'spinner',zIndex: 2e9,top: 'auto',left: 'auto'
};
var modal_opts = {
lines: 11,// The number of lines to draw
length: 23,// The length of each line
width: 8,// The line thickness
radius: 40,// The radius of the inner circle
corners: 1,// Corner roundness (0..1)
rotate: 9,// The rotation offset
color: '#FFF',// #rgb or #rrggbb
speed: 1,// Rounds per second
trail: 50,// Afterglow percentage
shadow: true,// Whether to render a shadow
hwaccel: false,// Whether to use hardware acceleration
className: 'spinner',// The CSS class to assign to the spinner
zIndex: 2e9,// The z-index (defaults to 2000000000)
top: 'auto',// Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
//jQuery extension
$.fn.spin = function(opts) {
if (opts == null) opts = default_opts;
if (opts == "modal") opts = modal_opts;
this.each(function() {
var $this = $(this),data = $this.data();
if (data.spinner) {
data.spinner.stop();
delete data.spinner;
if (opts == modal_opts) $("#spin_modal_overlay").remove();
return this;
}
var spinElem = this;
if (opts == modal_opts){
$('body').append('<div id="spin_modal_overlay" style="background-color: rgba(0,0.6); width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:'+(opts.zIndex-1)+'"/>');
spinElem = $("#spin_modal_overlay")[0];
}
data.spinner = new Spinner($.extend({color: $this.css('color')},opts)).spin(spinElem);
});
return this;
};
