title: popup form using JQuery in ASP.Net MVC
body: <p>I'm trying to open a contact form as popup like below picture , once user click link or button in asp.net mvc view page</p>
  
  <p><a href="https://i.stack.imgur.com/PHdJE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PHdJE.jpg" alt="enter image description here"></a></p>
  
  <p>this is <strong>index.cshtml</strong> viewpage</p>
  
  <pre><code>       @{       
         Layout = "~/Views/Shared/_Right_upper_Layout.cshtml";
          }
  
         &lt;a class="openDialog" data-dialog-id="emailDialog" data-dialog-title="contactus" href="~/Home/ContactUs"&gt;Contact US&lt;/a&gt;
  
  &lt;script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"&gt;
  &lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"&gt;
  &lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"&gt;
  &lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"&gt;
  &lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $.ajaxSetup({ cache: false });
  
      $(document).ready(function () {
  
          $(".openDialog").live("click", function (e) {    
              e.preventDefault();    
              $("&lt;div&gt;&lt;/div&gt;")    
              .addClass("dialog")    
              .attr("id",$(this).attr("data-dialog-id"))    
              .appendTo("body")    
              .dialog({    
                  title: $(this).attr("data-dialog-title"),
                  close: function () { $(this).remove() },
                  modal: true    
              })
  
              .load(this.href);
          });
      });
  &lt;/script&gt;
  
  
  @section Scripts 
  {}
  </code></pre>
  
  <p>this is controller </p>
  
  <pre><code>    public ActionResult ContactUs()
      {
          return PartialView("ContactUs");
      }
  </code></pre>
  
  <p>this is <strong>ContactUs.cshtml</strong> page</p>
  
  <pre><code>&lt;label for="Name"&gt;Name:&lt;/label&gt;&lt;br /&gt;
  
  &lt;input id="Namecontact" name="Name" type="text" /&gt;&lt;br /&gt;
  
  &lt;label for="email"&gt;Email:&lt;/label&gt;&lt;br /&gt;
  
  &lt;input id="emailcontact" name="email" type="text" /&gt;&lt;br /&gt;
  
  &lt;label for="message"&gt;Message:&lt;/label&gt;&lt;br /&gt;
  
  &lt;textarea id="messagecontact" name="message"&gt;&lt;/textarea&gt;
  
  &lt;input class="close" name="submit" type="submit" value="Submit" /&gt;
  </code></pre>
  
  <p>but once I click this <strong>ContactUs</strong> its open new tab not a popup, whats wrong here.</p>