在Jquery弹出窗口中显示加载微调器

时间:2011-06-07 17:03:46

标签: jquery iframe progress-bar bpopup

我正在使用jquery popup在iframe中加载外部页面。

现在我想显示加载微调器或加载条形图并在其工作时隐藏外部页面/ iframe,因此用户只能看到微调器。

可以这样做,如果是,how.please帮助我。

这是代码

    <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>

三江源

2 个答案:

答案 0 :(得分:1)

你可以使用jQuery插件。 Here are a few variations of a jQuery Modal(弹出窗口)我会用这个SimpleModal jQuery plugin at ericmmartin.com。它说,“加载”作为内容加载,我确信这可以用加载微调器图形覆盖。

答案 1 :(得分:1)

这可能会对你有所帮助

<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>

在document.ready

中写下这个
$("#dialog1").dialog({
                autoOpen: false,
                height: 150,
                weight: 50,
                resizable: false,   
                modal: true 
            });

//点击元素你可以这样做

$("a#em4c").bind("click", function () {
        $('#dialog1').removeAttr('style');
        $('#dialog1').dialog('open');
            var url ="some.php";
            $('#iframe1').attr('src',url);
    })

单击元素后,它将打开旋转图像,然后打开一些.php iframe中。这是你在期待的吗?