2010-06-29 1 views
0

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

Тот подход, с которым я иду прямо сейчас создает поддельный якорь, а затем вызвав его щелчок событие, чтобы открыть модальное

<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> 

В поисках более надежного решения это мое.

ответ

3

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

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