I am using jquery popup that loads a external page inside an Iframe.
Now I want to show loading spinner or loading bar image and hide the external page/iframe while its working,so user only sees the spinner.
can it be done,if yes how.please help me.
Here is the code
<script type="text/javascript">
$(document).ready(function () {
$("a#em4c").bind("click", function () {
$("#popup2").bPopup({ content: 'iframe', contentContainer: '#pContent', loadUrl: "http://site.com" });
return false
});
});
</script>
html Part
<p><a id="em4c"><strong>POP ME</strong>: Simple jquery popup that loads a page inside an iframe</a></div>
Thankyou
Might This would be helpful for you
<form>
Your input elements
</form>
<div id="dialog1" title="Waiting" style="display:none">
<img src="/spinning.gif" border="0" align="left" hspace="12"/> Place all your text here
<iframe id="iframe1" src="" width="100%" height="100%"></iframe>
Place all your Text
</div>
write this in document.ready
$("#dialog1").dialog({
autoOpen: false,
height: 150,
weight: 50,
resizable: false,
modal: true
});
//On click of the Element You can do in this way
$("a#em4c").bind("click", function () {
$('#dialog1').removeAttr('style');
$('#dialog1').dialog('open');
var url ="some.php";
$('#iframe1').attr('src',url);
})
On click Of the Element it will Open the Spinning Image after That it opens some.php in the iframe. Is this you were expecting?