Условно установить контент внутри модал фейсбокс - PullRequest
Новая
       6

Условно установить контент внутри модал фейсбокс

0 голосов
/ 30 июня 2010

Я работаю над формой, в которой мне нужно условно установить содержимое внутри модального лица.Я создал пример кода ниже, где при нажатии на каждую ссылку мне нужно открыть модальный фейсбокс (который открывается).Теперь в этом модале у меня есть текстовое поле.Я хочу, чтобы текстовое поле автоматически заполнялось значением, равным тексту якоря, открывшего модальный, т. Е. При нажатии на первую гиперссылку текстовое поле должно быть заполнено «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>

Lookingдля более надежного решения, чем у меня.

1 Ответ

3 голосов
/ 30 июня 2010

Я недостаточно знаком с ASP.NET, чтобы знать, подходит ли ID '# TextBox1', на который я ссылаюсь ниже, но это должно помочь вам начать хотя бы.Это просто установка значения элемента input для текста, содержащегося в теге привязки, когда щелкают тег привязки. 

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