Невозможно ввести текст в поле ввода (во всплывающем окне fancy box)

#javascript #jquery #html #forms #fancybox

#javascript #jquery #HTML #формы #fancybox

Вопрос:

по какой-то причине я не могу ввести текст в поле ввода моей рассылки, теперь, когда я отображаю его во всплывающем окне fancybox. Есть идеи, в чем проблема и как это исправить? Смотрите http://jsfiddle.net/6G8YR / Большое спасибо,

 function openFancybox() {
    setTimeout( function() {$('#newspopup').trigger('click'); },1000);

}
$(document).ready(function() {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', { expires: 0.0001 });
    $('#newspopup').fancybox({
    helpers : {
        overlay : {
            css : {
                'background' : 'rgba(58, 42, 45, 0.3)'
            }
        }
    }
});

});

$(document).on('click', function(e) {
    if(e.target === $('.visitwebsitebtn')[0]) {
        $.fancybox.close();
    }
});

Ответ №1:

Хорошо, я разобрался с проблемой, но столкнулся только с другими видами проблем. Проблема в том, что существует событие, которое заставляет ваш fancybox обновляться каждый раз, когда кто-то случайно нажимает на него.

Вот почему вы не можете ничего написать во входных данных. У меня есть временное решение, которое действительно уродливо, но оно работает.

 $('#email').on('click', function(e){
    e.stopPropagation();
});

При нажатии на ввод электронной почты ваш fancybox не будет ссылаться. Я попытался применить это к вашему #newspopup, но он блокирует $ (‘#newspopup’).trigger(‘click’); поэтому ваш fancybox никогда не открывается при запуске.

Вот демо

Дополнительная информация:

Я раньше работал с плагином fancybox и никогда не сталкивался с этой проблемой. Возможно, вы захотите подумать о добавлении опций в свой fancybox .. например, добавьте эту строку :

 'type':'iframe',

Я бы попробовал на jsfiddle, но, к сожалению, похоже, они этого не позволяют.

1. Спасибо за вашу помощь, временное решение работает! Куда бы вы добавили ‘type’:’iframe’ в моем коде? (извините, я новичок в JS). Большое спасибо

2. .fancybox({‘type’:’iframe’, helper …}); и никаких проблем. =]

Ответ №2:

Вы можете оптимизировать свой код и избавиться от ненужных click событий и триггеров (поэтому вам также не понадобятся ненужные e.stopPropagation() методы), например :

 function openFancybox() {
    setTimeout(function () {
        $.fancybox('#newspopup', {
            modal: true, // this prevents fancybox to close unless close unless ".visitwebsitebtn" is clicked
            helpers: {
                overlay: {
                    css: {
                        'background': 'rgba(58, 42, 45, 0.3)'
                    }
                }
            },
            afterShow: function () {
                // enables a way to close fancybox
                $(".visitwebsitebtn").on("click", function () {
                    $.fancybox.close()
                });
            }
        });
    }, 1000);
};
$(document).ready(function () {
    var visited = $.cookie('visited');
    if (visited == 'yes') {
        return false;
    } else {
        openFancybox();
    }
    $.cookie('visited', 'yes', {
        expires: 7
    });
});

Смотрите JSFIDDLE