使用simplemodal，显示加载微调器，同时iframe中的内容加载

早上好！

我正在使用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('', { closeHTML: "", 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>1):parseInt(n.left,10)+i)+"px",top:(n.top=="auto"?ay-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)}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,i,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(),{position:"absolute",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,t,n,r){var i=e.firstChild;r=r.shadow&&r.lines||0,i&&t+r
'); spinElem = $("#spin_modal_overlay")[0]; } data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(spinElem); }); return this; };

对此的简单回答是使用load（）然后将模态的代码放在load的回调中。 这是一个例子，伪代码 – 

 $('.basic').click(function (e) { e.preventDefault() // use instead of return false var src = "http://localhost" + $(this).attr("href"); $('iframe details').load('loading.html', function() { $.modal('