how to load the bootstrap modal with the ajax called data
<p>my razor syntax  is  </p>

<pre><code> @foreach(var item in Model) 
 {
                      &lt;td&gt;@item.email&lt;/td&gt;
                      &lt;td&gt;&lt;a href ="javascript:void(0);"onclick="Getinfo(this)"  data-assigned-id="@item.email" &gt;&lt;/a&gt;@item.lastaccessdate&lt;/td&gt;

 }
</code></pre>

<p>this is the javascript i am using to get data from controller and then binding that data as a table in tab</p>

<pre><code>  function Getinfo(elem)
{
    var email = $(elem).data('assigned-id');
    $.get('/Home/GetDetails', { email: email }, function (data) { grid(data); });

}
function grid(abc)
{
    var tab = "&lt;table class='table'&gt;";
    tab += "&lt;thead&gt;";
    tab += "&lt;tr&gt;";
    tab += "&lt;th&gt;Name&lt;/th&gt;";
    tab += "&lt;th&gt;Login&lt;/th&gt;";
    tab += "&lt;th&gt;Username&lt;/th&gt;";
    tab += "&lt;/tr&gt;";
    tab += "&lt;/thead&gt;";
    tab += "&lt;tbody&gt;";
    for (var it in abc)
    {
        tab += "&lt;tr&gt;";
        tab += "&lt;td&gt;" + abc[it].Name + "&lt;/td&gt;";
        tab += "&lt;td&gt;" + abc[it].login + "&lt;/td&gt;";
        tab += "&lt;td&gt;" + abc[it].username + "&lt;/td&gt;";
        tab += "&lt;/tr&gt;";
    }
    tab += "&lt;/tbody&gt;";
    tab += "&lt;/table&gt;";
}
</code></pre>

<p>Now how do i bind this data in 'tab' to a twitter bootstrap modal pop up ? 
  thanks in advance.</p>