title: How to do Modal Popup for particular row of webgrid in mvc
body: <p>I am using a webgrid to display data.I have used edit button by using actionlink and everything is working fine. Now i have to modify the editing in a sense that the editing data should come as a popup modal so everyone can edit the webgrid. Here is the working code for webgrid which has editing functionality which I need to modify as a popup modal</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .webGrid { margin: 4px; border-collapse: collapse; width: 500px;  background-color:#B4CFC3;}
      .header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
      .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
      .alt { background-color: #E4E9F5; color: #000; }
      .gridHead a:hover {text-decoration:underline;}
      .description { width:auto}
      .select{background-color: #71857C}
  &lt;/style&gt;
  @{
  
      var grid = new WebGrid(source: Model,
                                             defaultSort: "First Name",
                                             rowsPerPage:5, fieldNamePrefix:"wg_",
                                             canPage:true,canSort:true,
                                             pageFieldName:"pg",sortFieldName:"srt"
                                             );  
   }
  
  
  
  &lt;div id="gridContent"&gt;
      @grid.GetHtml(tableStyle: "webGrid",
              headerStyle: "header",
              alternatingRowStyle: "alt",
              selectedRowStyle: "select",
              columns: grid.Columns(
              //grid.Column("Id", format: (item) =&gt; item.GetSelectLink(item.Id)),
                      //grid.Column("id", format: (item) =&gt; item.GetSelectLink(item.id)),
              grid.Column("cityname","cityname" ),
              grid.Column("citypopulation", "citypopulation", style: "description"),
              grid.Column("country", "country"),
  
              grid.Column(format: (item) =&gt;  Html.ActionLink("Edit", "Edit", new { id = item.id }))
  
  
          )
  
  
               //grid.Column(header: "Edit", format: @&lt;text&gt;@Html.ActionLink("Edit", "Edit", new { id=item.id })&lt;/text&gt;, style: "colOperation")
  
      //hggh
       )) 
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>i did like this but it is creating same page again donwside and then same page in popup and finally going in to the edit page which i already created. i dont know what went wrong</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function(){
      $(".popupLink").click(function (e) {
          var url = this.href;
          var dialog = $("#dialog");
          if ($("#dialog").length == 0) {
              dialog = $('&lt;div id="dialog" style="display:hidden"&gt;&lt;/div&gt;').appendTo('body');
          }
          dialog.load(
              url,
              {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
              function (responseText, textStatus, XMLHttpRequest) {
                  dialog.dialog({                       
                      close: function (event, ui) {                            
                          dialog.remove();
                      },
                      modal: true,                        
                      width: 460, resizable: false
                  });
              }
          );           
          return false;           
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>in grid</p>
  
  <pre><code>grid.Column(format: (item) =&gt;  Html.ActionLink("Edit", "Edit", new { id = item.id }, new { @class = "popupLink" }))
  </code></pre>