How to display jquery modal popup on mvc 4 button click
<p>I am doing one mvc project where I have one button. When I clicked on button one popup with textbox and button should appear. I tried as below. Instead of getting popup when the page first loads required textbox and button in page only(supposed to display when the button clicked) This is what I tried.</p>

<pre><code>&lt;head&gt;
 &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;

    &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;

    &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;

    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
&lt;/head&gt;
</code></pre>

<p>Style information I copied from <a href="https://jqueryui.com/dialog/#modal-form(many" rel="nofollow">https://jqueryui.com/dialog/#modal-form(many</a> lines of code so I am not posting here)
This is my script and popup code.</p>

<pre><code>&lt;div id="dialog-form" title="Create new user"&gt;
    &lt;form&gt;
        &lt;fieldset&gt;

            &lt;label for="name"&gt;Enter your Comments Here&lt;/label&gt;

            &lt;input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all"&gt;
            &lt;!-- Allow form submission with keyboard without duplicating the dialog button --&gt;

            &lt;input type="submit" tabindex="-1" style="position:absolute; top:-1000px"&gt;

        &lt;/fieldset&gt;

    &lt;/form&gt;

&lt;/div&gt;
&lt;script&gt;
    $("#Delete").button().on("click", function () {

        dialog.dialog("open");

    });


&lt;/script&gt;
</code></pre>

<p>This is my mvc code.</p>

<pre><code>@using (Html.BeginForm("Index", "TestRendering", FormMethod.Post))
    {
   &lt;td scope="col"&gt;&lt;input type="button" id="Delete" class="btn btn-primary btn-cons red" value="Delete" /&gt;&lt;/td&gt;

    }
</code></pre>

<p>Am I going wrong in this process? Thanks.</p>