Colorbox с iframe - закрытие и открытие другого - PullRequest
Новая
       13

Colorbox с iframe - закрытие и открытие другого

3 голосов
/ 14 марта 2012

У меня есть окно colorbox, которое я открываю в iframe. Внутри этого окна у меня есть ссылка, по которой пользователь может щелкнуть, и в идеале я хотел бы, чтобы текущее окно colorbox закрылось, и открылось новое окно colorbox (снова в iframe) или загрузилось новое содержимое в существующий iframe.

Мое первое окно открывается так: 

$.colorbox({ width: "800px", height: "580px", open: true, iframe: true, href: '/App/View?id=' + id });

Когда я нажимаю на ссылку в этом первом окне, это то, что срабатывает: 

$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId })

Я пытался закрыть первое окно с помощью: 

parent.$.colorbox.close();

Но это заканчивается закрытием обоих окон.

Если я не пытаюсь закрыть второе окно открывается в содержимом первого окна, и у меня есть 2 границы, 2 кнопки закрытия и т. Д.

Есть идеи?

Спасибо.

Ответы [ 2 ]

8 голосов
/ 14 марта 2012

Попробуйте выполнить это, что закроет первый цветовой ящик и затем откроет новый цветовой ящик с контекстом родителя. 

parent.$.colorbox.close(); 
parent.$.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId });

На самом деле у вас должна быть функция на родительской странице, которая сделает это. 

function OpenNote(noteId){
   $.colorbox.close(); 
   $.colorbox({ width: "800px", height: "580px", iframe: true, href: "/App/Note?nodeId=" + nodeId });
}

И затем вызывайте эту функцию по щелчку ссылки внутри страницы просмотра, передавая идентификатор заметки. 

parent.OpenNote(id);
0 голосов
/ 09 января 2018

Я использую рекурсивную функцию для открытия другого цветового ящика, когда закрыто цветное окно. Моя функция: 

<script type="text/javascript">
    var colorList = [];
                    colorList.push('1. Popup Content');
                    colorList.push('2. Popup Content');
                    colorList.push('3. Popup Content');
                    colorList.push('4. Popup Content');
            colorboxRecursive(colorList);
    function colorboxRecursive(colorList){
        if (colorList.length>0) {
            $.colorbox({
                html:colorList.pop(),
                onClosed:function(){
                    if (colorList.length>0)
                        colorboxRecursive(colorList);
                }
            });
        }else{
            return false;
        }
    }
</script>
...