Автоматическое всплывающее окно Fancybox

Я скачал Fancybox из сети и работаю над ним.

<script type="text/javascript">
    $(document).ready(function() {
        /*
         *  Simple image gallery. Uses default settings
         */

        $('.fancybox').fancybox();

        $("#fancybox-manual-b").click(function() {
            $.fancybox.open({
                href : 'contact.php',
                type : 'iframe',
                padding : 5
            });
        });

    });
</script>
<style type="text/css">
    .fancybox-custom .fancybox-skin {
        box-shadow: 0 0 50px #222;
    }
</style>


    <a class="fancybox fancybox.iframe" href="contact.php">Subscribe</a>

Это работает хорошо, когда вы нажимаете на ссылку. Но теперь мне нужно, чтобы он автоматически всплывал, когда кто-то входит на главную страницу. Может ли кто-нибудь помочь с решением

3 2
html css jquery fancybox

3 ответа:

Fancybox напрямую не поддерживает способ автоматического запуска. Работа вокруг, которую я смог заставить работать, - это создание скрытого якорного тега и запуск события onclick. Убедитесь, что ваш вызов для запуска события onclick включен после включения файлов jquery и fancybox js. Я использовал следующий код:

Этот пример сценария встроен непосредственно в html, но он также может быть включен в файл js.

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>

Цвет Границы

Лично Я делаю это из css-файла fancybox, вы должны искать

#fancybox-content

И

.fancybox-outer

И измените его цвет фона или цвет границы в соответствии с вашим требованием.

Надеюсь, что это работает для вас.

6

Этот код работает хорошо. Я испытал его сам 

<script type="text/javascript">
    $(document).ready(function() {
$.fancybox({
                        'width': '40%',
                        'height': '40%',
                        'autoScale': true,
                        'transitionIn': 'fade',
                        'transitionOut': 'fade',
                        'type': 'iframe',
                        'href': 'http://www.example.com'
                    });
 });

N. B: я протестировал его с версией 2.1.4 Вы также можете попробовать это 

$(document).ready(function() {
             $("#fancybox-manual-a").trigger('click');
            });

Существует якорный тег с идентификатором fancybox-manual-a

1
<script type="text/javascript">
    $(document).ready(function() {

        $.fancybox.open('#id');
    });
</script>
0