Fancybox - кнопка ASP.NET не работает

Question

Я только что определил с помощью Firebug, что при создании окна Fancybox оно фактически берет все мои элементы управления ASP.NET (содержащиеся в теге DIV) и помещает их вне тега FORM. Поэтому я полагаю, что это причина, по которой кнопка ASP.NET ничего не делает - она ​​находится вне формы.

Итак, есть ли у вас какие-либо предложения, как я могу предотвратить это (или заставить эту кнопку ASP.NET работать), кроме использования совершенно другого модального диалога?

РЕДАКТИРОВАТЬ: ОК, люди сообщают, что некоторые из предложенных исправлений работают для них на определенных версиях. Поэтому обязательно прочитайте все ответы / прокрутите вниз, чтобы узнать, как решить эту проблему в разных версиях Fancybox.

Answer 1

Вам нужно изменить это (где-то около строки 719 jquery.fancybox-1.3.1.js):

$('body').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
        );

на

$('form').append(
    tmp         = $('<div id="fancybox-tmp"></div>'),
    loading     = $('<div id="fancybox-loading"><div></div></div>'),
    overlay     = $('<div id="fancybox-overlay"></div>'),
    wrap        = $('<div id="fancybox-wrap"></div>')
);

Answer 2

Для тех, кому нужен простой ответ на эту проблему с помощью Fancybox версии 2, есть гораздо более простой способ сделать это. Все, что вам нужно сделать, это добавить родителя: "form: first" в коде, например,

    $(document).ready(function () {
        $(".various").fancybox({
            parent: "form:first",
            fitToView: true,
            width: '300px',
            height: '100px',
            autoSize: false,
            closeClick: false,
            openEffect: 'none',
            closeEffect: 'none',
            modal: false
        });
    });

тогда это добавит элементы fancybox в dom внутри тега формы, а не внутри тега body.

Answer 3

Fancybox версия 2.1.4

Измените эти 2 строки

Вокруг линии 2069:

document.all && !document.querySelector ? $('html') : $('body');

до

document.all && !document.querySelector ? $('html') : $('form:first');

и около Линии 1960:

this.overlay = $('<div class="fancybox-overlay"></div>').appendTo('body');

до

this.overlay = $('<div class="fancybox-overlay"></div>').prependTo('form');

Вы также можете использовать appendTo, но это ваше дело. В моем случае мне понадобилось prependTo.

Answer 4

Не изменяя источник FancyBox, поместите его после сценария FancyBox (вне любых событий загрузки !!!):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/#.#/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-#.#.#.pack.js"></script>
<script type="text/javascript">

    // Override $.fancybox.init to fix ASP.NET PostBack bug;
    var fancyboxInitOld = $.fancybox.init;
    $.fancybox.init = function () {
        fancyboxInitOld.apply(arguments);
        $("#fancybox-tmp, #fancybox-loading, #fancybox-overlay, #fancybox-wrap").appendTo("form:first");
    };

    // Your code ...

</script>

Answer 5

Я пытался разобраться с этой проблемой всю неделю, мне действительно не повезло

Я только что наткнулся на эту статью

http://usmanshabbir.blogspot.com/2010/10/click-server-button-problem-in-jquery.html

Это объясняет, как заставить постбэк работать с диалоговым окном jQuery UI.

Если нет необходимости использовать причудливую коробку на 100%, то этот метод определенно стоит попробовать, сегодня он избавил меня от многих хлопот.

Answer 6

jquery.fancybox-1.3.4.js line 1040

//$('body').append(
   $('form').append(
            tmp = $('<div id="fancybox-tmp"></div>'),
            loading = $('<div id="fancybox-loading"><div></div></div>'),
            overlay = $('<div id="fancybox-overlay"></div>'),
            wrap = $('<div id="fancybox-wrap"></div>')
        );

Работает (мой asp: Button выполняет постбэк) для меня на FF и IE9, спасибо за решение

Answer 7

Приведенное выше обновление не работает для меня, fancybox все еще был добавлен за пределы формы. Затем я прокомментировал эти 6 строк в jquery.fancybox-1.3.2.js и обнаружил, что они не используются вообще в моем коде.

Я выполнил поиск по 'body' в js-файлах fancybox и изменил его на 'form' в:

jquery.fancybox-1.3.2.js (ln 484)
jquery.fancybox-1.3.2.pack.js (стр. 27, стр. 41)

Теперь в форму добавляется fancybox, и серверные элементы управления работают.

Answer 8

Я использую Fancybox 1.3.4, чтобы показать страницу aspx в качестве всплывающей страницы в fancybox iframe. Но кнопка на всплывающей странице не вызывает обратную передачу. Я ничего не изменил, как вы сказали раньше. Скорее я сделал следующее.

 function check() 
 {
            var validated = Page_ClientValidate();
            if (validated) {
                __doPostBack('<%=bur.ClientID%>','');             
                parent.$.fancybox.close();                                                       
                return true;
            }
            else 
            {
                return false;
            }
 }



 <asp:Button ID="bur" runat="server" Text="ser"  
            OnClientClick="check()"   />


protected void bur_Click(object sender,Eventargs e)
{ //put breakpoint here.

}

Answer 9

Версия Fancybox: 2.1.2

Строка 1782 из jquery.fancybox.js

Изменить это:

this.el     = document.all && !document.querySelector ? $('html') : $('body');

На это:

this.el     = document.all && !document.querySelector ? $('html') : $('form:first');

Answer 10

Вот самое худшее из возможных решений, однако оно сработало для меня.Мне нужно было faceybox и codebehind одновременно.Установите свой модный ящик для загрузки при нажатии кнопки.Затем onClosed передает значения на другую страницу C # и выполняет код, загружаемый при загрузке страницы.

<script type="text/javascript">
    $(document).ready(function () {
    $(".fancy").fancybox({
        onClosed: function () {
            window.location.href = "worker_addcarrier.aspx?name=" + document.getElementById('<%=txt_carriername.ClientID%>').value +
                "&password=" + document.getElementById('<%=txt_password.ClientID%>').value +
                "&email=" + document.getElementById('<%=txt_email.ClientID%>').value;
        }
    });
});

, а затем просто "class =":