facebox 모달의 내용을 조건부로 설정하십시오.

나는 facebox 모달에 내용을 조건부로 설정해야하는 양식 작업을하고 있습니다. 아래 예제 코드를 작성하여 페이스 북 모달을 열 필요가있는 각 링크를 클릭하면 열립니다. 이제이 모달에서 나는 텍스트 상자를 가지고 있습니다. 첫 번째 하이퍼 링크를 클릭하면 텍스트 상자는 "Field1"로 채워지고 두 번째 텍스트 상자는 "Field2"값을 가져야합니다. 즉, 모달을 열었던 앵커의 텍스트와 동일한 값으로 텍스트 상자를 자동으로 채우고 싶습니다. 다음 샘플 코드는 다음과 같습니다facebox 모달의 내용을 조건부로 설정하십시오.

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

를 열고 자사의 클릭 이벤트를 트리거 한 후 지금 바로 갈거야 가짜 앵커를 생성하고있는 한 방법 내것보다.

출처

2010-06-29 Raghav

나는 ASP.NET에서 '# TextBox1'ID가 아래에 해당하는지 여부를 알기에는 충분하지 않지만, 적어도 시작하는 데 도움이 될 것입니다. 앵커 태그를 클릭했을 때 입력 요소의 값을 앵커 태그에 포함 된 텍스트로 설정하는 것입니다.

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

출처

2010-06-29 22:33:50

facebox 모달의 내용을 조건부로 설정하십시오.

답변

관련 문제