Как загрузить iframe поверх содержимого в аккуратном липком окне с помощью jquery

Question

Я интегрирую простое приложение чата в мой сайт, который просто добавляется с помощью iframeing chat.php

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

Автоматический запуск чата для загрузки между загрузками страниц после его включения (путем проверки сеанса, который он написал при первом включении чата), также был бы полезен.

Я использую фреймворк jquery, но я не настолько опытен в этом. Сайт написан на php.

Что я думал, это

У меня есть пустой div с идентификатором chatbox . Когда кто-то щелкает ссылку, чтобы увидеть окно чата, он загружает chat.php внутри этого div в iframe и добавляет в div класс, который поместил бы div в верхнем правом углу.

Answer 1

Простое и очень аккуратное решение: используйте плагин PrettyPhoto (или любой другой стиль лайтбокса).

http://www.no -margin-for-errors.com / проекты / prettyphoto-JQuery-Lightbox-клон /

Мне нравится PrettyPhoto за его простой вид, и до сих пор у меня не было с этим проблем.

Код может быть таким простым:

<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>

На сайте есть все детали.

Answer 2

<style type="text/css">
#chatFrame {
    display: none;
    width: 300px;
    height: 200px;
    /* some more styles */
}
</style>
<script type="text/javascript">
$(document).ready(function() {

    $('#activator').click(function() {

        $('#chatFrame').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="chat.php"></iframe>').show();
    });
});
</script>

<a href="javascript:void(0);" id="activator">open chat</a>
<div id="chatFrame"></div>