jquery - usando Simplemodal, muestra cargar spinner mientras el contenido dentro de iframe carga

loading

Question

¡Buenos días!

Estoy usando el gran plugin de SimpleModal para jQuery de Eric Martin. Actualmente, estoy cargando un modal usando un iframe para cargar mis páginas solicitadas que funciona como se esperaba. Lo que me gustaría implementar es un icono de carga ... que se muestra mientras se carga el contenido.

Estoy cargando mi modal de la siguiente manera:

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;
    });
});

Tengo una imagen de fondo configurada para mi contenedor modal, que se muestra de inmediato. Definitivamente preferiría mostrar un spinner de carga aquí también.

Answer 1

Estoy usando una versión ligeramente extendida de spin.js para hermosos spinners y overlays modales spinner. Se puede usar en cualquier elemento simplemente:

$(''#ELEMENT_ID'').spin()

o para hilanderos modales:

$(''#ELEMENT_ID'').spin("modal")

Llame de nuevo a girar para apagar y extraer la ruleta de nuevo. Así es como esto luce:

Este es el spin.min.js que incluye una extensión jQuery y algunos opts predeterminados para spinners modales:

//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,t,n,r){var o=["opacity",t,~~(e*100),n,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={},s,a=function(){var e=o("style",{type:"text/css"});return u(t.getElementsByTagName("head")[0],e),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(),{position:"absolute",top:1+~(t.width/2)+"px",transform:t.hwaccel?"translate3d(0,0,0)":"",opacity:t.opacity,animation:s&&f(t.opacity,t.trail,n,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,0,0,.1)")));return e},opacity:function(e,t,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,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<i.childNodes.length&&(i=i.childNodes[t+r],i=i&&i.firstChild,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, 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;
};

Answer 2

La respuesta simple para esto es usar una carga () y luego colocar el código para el modal en la devolución de llamada de la carga. Aquí hay un ejemplo, pseudo-código -

$(''.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(''<iframe id="det....

De esta forma, el iFrame carga la página que contiene la imagen inmediatamente y luego la modal.

Answer 3

Pude resolver esto insertando un div de carga dentro de la fuente simplemodal y luego llamando a show / hide según mi código.