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

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:scheR_582_11845@as-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;
};