показать счетчик загрузки во всплывающем окне Jquery

#jquery #iframe #progress-bar #bpopup

#jquery #iframe #индикатор выполнения #bpopup

Вопрос:

Я использую всплывающее окно jquery, которое загружает внешнюю страницу внутри Iframe.

Теперь я хочу показать счетчик загрузки или изображение панели загрузки и скрыть внешнюю страницу / iframe во время ее работы, чтобы пользователь видел только счетчик.

можно ли это сделать, если да, то как.пожалуйста, помогите мне.

Вот код

     <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-часть

 <p><a id="em4c"><strong>POP ME</strong>: Simple jquery popup that loads a page   inside an iframe</a></div>

Спасибо

Ответ №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);
    })

При нажатии на Элемент он откроет Вращающееся изображение, после Чего оно откроется some.php в
iframe. Вы этого ожидали?

1. 1 за это! @Priya, вы должны добавить jquery ui css и js на свою страницу, чтобы это заработало, и это немного сложно, когда вы делаете это в первый раз: 1) jqueryui.com/download — перейдите сюда и снимите все флажки, кроме «Диалог», затем нажмите [Загрузить]. 2) Добавьте css, js и изображения на свой сайт. 3) импортируйте css в <head> вашей страницы перед любым импортом js и импортируйте js-файл пользовательского интерфейса jquery в <head> вашей страницы сразу ПОСЛЕ импорта jquery js. После этого должно сработать.

2. Спасибо, я все это сделал, но не сработало … в любом случае, я придумал другой способ .. спасибо за помощь вам обоим 🙂

Ответ №2:

Вы могли бы использовать плагин jQuery. Вот несколько вариантов модального jQuery (всплывающего окна). Я бы использовал этот плагин SimpleModal jQuery в ericmmartin.com . При загрузке содержимого написано «Loading», и я уверен, что это можно переопределить с помощью графического индикатора загрузки.

1. спасибо, но тогда как мне скрыть iframe во время его работы в фоновом режиме.

2. Он не скрывает это. Есть другой способ сделать это .. например, загрузить все в скрытый div, затем, когда содержимое загружено, вы можете добавить его в модальное всплывающее окно.