Asp.net control inside of fancybox modal is not “working”

问题

Your typical "It doesn't work" freak out going on over here. Any direction would help.

I have a login control on my master page and I'm trying to only display it using jquery fancybox and then redirect the user once they are logged in.

But any buttons or controls that should do "something" when pressed when I put inside the fancy box are not responding. If I keep the div visible and then use the control not using fancybox I get the expected result.

What are my options?

回答1:

It is not a Javascript error. I would rather say that when using Fancybox modal, Fancybox creates a new "window" and you can no longer reach the code-behind.

What you need to do is create a hiddenfield and a javascript function via which you can send the data object to the hiddenfield.

Code example:

*Fancybox textbox (inside fancybox) ->On Send: Javascript button creates a object(value) of the textbox and sends to asp:Hiddeenfield. -> From HiddenField to what you need to do???

div#inline2 {display: none;}
.myDummyClass {height: inherit;}

<!--Link that activates the fancybox with textbox-->
<a href="#inline2" class="myDummyClass">LinkName</a>
<!--this will be shown in fancybox-->

<div id="inline2">
    <p>
        <asp:TextBox ID="tBox" runat="server" TextMode="MultiLine" Width="200px" Style="overflow:hidden; height:400px;" />
        <asp:Button runat="server" Text="Knappen" OnClientClick="Send()" />
    </p>
</div>
<input id="HiddenField" type="hidden" runat="server" />
<script>
    $(".myDummyClass").focus(function() {
        $(".myDummyClass").fancybox({
            'modal': true
        });
    });

    function Send()
    {
        document.getElementById("<%=HiddenField.ClientID %>").value = document.getElementById("<%=txt1.ClientID%>").value;
        $.fancybox.close();
    }
</script>

CodeBehind:

var SomeThing = HiddenField.Value;

回答2:

Sounds like you have some javascript errors on the page. ASP.Net controls will often stop responding when javascript is broken.

回答3:

Fancybox, by default, appends to the body, not the form, so your controls don't work in the default state. To remedy this, look in the fancy box source code for "appendTo('body')" and change it to "appendTo('form')"

Depending on the version of fancybox, there might be multiple locations

回答4:

I'm not sure you have to use : appendTo('form').

I think you must change :

$('<div id="fancybox-title" class="' + titlec + '" />').css({
            'width'         : width,
            'paddingLeft'   : currentOpts.padding,
            'paddingRight'  : currentOpts.padding
        }).html(title).appendTo('body');

$('<div id="fancybox-title" class="' + titlec + '" />').css({
            'width'         : width,
            'paddingLeft'   : currentOpts.padding,
            'paddingRight'  : currentOpts.padding
        }).html(title).appendTo('form');

And

$('<div id="fancybox-title" class="' + titlec + '" />').css({
            'width'         : width,
            'paddingLeft'   : currentOpts.padding,
            'paddingRight'  : currentOpts.padding
        }).html(title).appendTo('body');

$('<div id="fancybox-title" class="' + titlec + '" />').css({
            'width'         : width,
            'paddingLeft'   : currentOpts.padding,
            'paddingRight'  : currentOpts.padding
        }).html(title).appendTo('form');

来源：https://stackoverflow.com/questions/2581668/asp-net-control-inside-of-fancybox-modal-is-not-working

标签

ASP.NET

jquery

fancybox