Question

我正在处理一个表单，我需要在facebox模式中有条件地设置内容。我在下面创建了一个示例代码，点击每个链接，我需要打开一个facebox模式（正在打开）。现在在这个模式中我有一个文本框。我希望文本框自动填充，其值等于打开模态的锚文本，即单击第一个超链接时，文本框应填充“Field1”，单击第二个文本框时应具有“Field2”值。以下是示例代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
        type="text/css" />
    <script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
    <form id="HtmlForm" runat="server">

    <a href="#info" rel="facebox">Field1</a> <br />
    <a href="#info" rel="facebox">Field2</a> <br />

    <div id="info" style="display: none;">
        <p>
           Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </p>
        <p>
            <asp:Button ID="Button1" runat="server" Text="Edit"  />
        </p>
    </div>
    </form>
    <script type="text/javascript">
        $(function () {
            $('a[rel*=facebox]').facebox();
        });
    </script>
</body>
</html>

我现在要采用的一种方法是创建一个假锚，然后触发其click事件以打开模态

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
        type="text/css" />
    <script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
    <form id="aspnetForm" runat="server">
    <a id="afake" href="#info" style="display:none;"></a>
    <a href="#info" rel="facebox">Field1</a> <br />
    <a href="#info" rel="facebox">Field2</a> <br />

    <div id="info" style="display: none;">
        <p>
           Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </p>
        <p>
            <asp:Button ID="Button1" runat="server" Text="Edit"  />
        </p>
    </div>
    </form>
    <script type="text/javascript">
        $(function () {

            $('a[rel*=facebox]').click(function () {
                $('#afake').facebox().trigger('click');
                var instance = $(this);
                $('#<%= TextBox1.ClientID %>').val(instance.html());
            });

        });
    </script>
</body>
</html>

寻找比我更强大的解决方案。

Answer 1

我不熟悉ASP.NET足以知道我在下面引用的ID'＃TextBox1'是否合适，但这应该有助于您至少开始。单击锚标记时，只需将input元素的值设置为anchor标记中包含的文本即可。

<script type="text/javascript">
    jQuery(function($) {
        $('a[rel*=facebox]').facebox().click(function(event) {
            $('#TextBox1').val($(this).text());
        });
    });
</script>

有条件地在facebox模式中设置内容

1 个答案: