シンプルモダルを使用して、読み込み中のスピナーを表示中にiframeが読み込まれる

Question

おはようございます！

私はEric MartinのjQuery用にSimpleModalプラグインを使用しています。現在、私は期待どおりに動作する要求されたページを読み込むためにiframeを使用してモーダルをロードしています。私が実装したいのは、コンテンツがロードされている間に表示されるLoading ...スピナーです。

次のように私は私のモーダルをロードしています：

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

私はすぐに表示私のモーダルコンテナ、の背景画像を設定しています。私は間違いなくここにローディングスピナーを表示することを好むでしょう。

Answer 1

シンプルモールドソース内にロードdivを挿入し、必要に応じて自分のコードからshow/hideを呼び出すことで、これを解決できました。

Answer 2

この簡単な答えは、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('<iframe id="det.... 

のiFrameが直ちに、次に画像モーダルを含むページをロードする方法 - ここでは、例えば、擬似コードです。

Answer 3

私は美しいスピナーとモーダルスピナーオーバーレイのためにspin.jsというやや拡張したバージョンを使用しています。単にによって任意の要素で使用することができます。

$('#ELEMENT_ID').spin() 

またはのためのモーダルスピナー：

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

コールスピンを再びオフにして、再びスピナーを削除します。これは、jQueryの拡張子を含むspin.min.jsであり、いくつかのデフォルトがモーダルスピナーのために付き合え

：これは、それがどのように見えるかです

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