usando simplemodal, muestra cargando spinner mientras el contenido dentro de iframe carga

Question

¡Buenos días!

Estoy usando el gran SimpleModal plugin 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 un conjunto de imágenes de fondo para mi modal de contenedores, que muestra enseguida. Definitivamente preferiría mostrar un spinner de carga aquí también.

Answer 1

Pude resolver esto insertando un div de carga dentro de la fuente simplemodal y luego llamando a mostrar/ocultar según sea necesario desde mi código.

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í está 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 marco flotante carga la página que contiene la imagen de inmediato y luego el modal.

Answer 3

Estoy utilizando una versión ligeramente extendida de spin.js para hermosos hilanderos y superposiciones moda spinner. Puede ser utilizado en cualquier elemento simplemente:

$('#ELEMENT_ID').spin() 

o para hiladores modales:

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

llamada de vuelta de nuevo para desactivar y eliminar el spinner de nuevo. Esta es la forma en que parece:

Este es el spin.min.js incluyendo una extensión de jQuery y algunos opta por defecto para hiladores 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; 
};