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.