How to deal with dialog in MVC 4 issues?

See more:

C#

Javascript

Ajax

MVC

jQuery

MVC4

I have created a pop up window with needed fields but suddenly I ran into a big amount of issues. I admin that I'm a total newbie speaking about jquery, mvc or css, so I can't detect where the problem is.

The biggest issue is that submin buttons mentioned in div are doing nothing. They simply didn't work.

My div is:

@using (Html.BeginForm("Vehicle", "Home", new { id = "Id" }))
        {
        <table>
                    <tr>
                        <th>Search Criteria:</th>
                    </tr>
                    <tr>
                        <td>Model</td>
                        <td>
                            <input class="k-in" style="width: 100px; padding: 0; font-size: 0.9em;" type="text" id="model" name="model" value="@Model.Filter.Model"/>

                        </td>
                    </tr>
                    <tr>
                        <td>Status</td>
                        <td>
                            @{
                var statusItems = new List<SelectListItem>()
                {
                    new SelectListItem
                    {
                        Value="None",
                        Text="None",
                        Selected= Model.Filter.Status == "None" ? true : false
                    },
                    new SelectListItem
                    {
                        Value="New",
                        Text="New",
                        Selected= Model.Filter.Status == "New" ? true : false
                    }
                };
            }
            @Html.DropDownList("Status", statusItems, "-- Select --", new { @class = "k-dropdown", @style= "width: 120px;font-size: 0.9em; padding: 0;"})

                        </td>
                    </tr>
                    <tr>
                        <td><input class="k-button" style="font-size: 0.9em; color: #ff6a00; width: 100px" type="submit" name="filter" value="Filter" /></td>
                        <td><input class="k-button" style="font-size: 0.9em; color: #ff6a00; width: 100px" type="submit" name="filter" value="Remove Filter" onclick="ClearFilter()" /></td>
                    </tr>
                </table>
        }
            </div>

The second strange issue is the pop up call itself. Then window appeared, everything seems fine, for a few moments. Then I watch to the screen bottom and I see that after all css style, was added and empty, white space. Actually, when I tried to debug it, I saw that

<div class="ui-widget-overlay ui front"></div>

was placed after footer. As I understand pop up window understand it as an... start point I guess...

And last one... how should I call additional scripts from pop up window? I mean, I have datepicker, but when I tried to add it in pop up window, it's worked but datepicker window appeared in a position where could be div itself if it wasn't a pop up. In onter words, outside the dialog.

My dialog:

$(document).ready(function () {
    $('#filterPanel').dialog({
        autoOpen: false,
        modal: true

    });

});

function OpenPanel() {
    $('#filterPanel').dialog("open");

}
Help me please to understand, what I am missing?</pre>