On my button click, the jQuery dialog appears with just the title and buttons. When you mouseover, then you see the form inputs in front of the dialog covering the buttons. When you scroll down, the form inputs do not move, so you can never see the last few textboxes.
<div id="popupCreateCompany" title="Create a new company">
<form>
<fieldset>
<p>
<label for="company_name">Company Name:</label>
<%= Html.TextBox("company_name") %>
</p>
<p>
<label for="company_desc">Company Description:</label>
<%= Html.TextBox("company_desc") %>
</p>
<p>
<label for="address">Address:</label>
<%= Html.TextBox("address") %>
</p>
<p>
<label for="city">City:</label>
<%= Html.TextBox("city") %>
</p>
<p>
<label for="state">State:</label>
<%= Html.TextBox("state") %>
</p>
<p>
<label for="zip">Zip:</label>
<%= Html.TextBox("zip") %>
</p>
<p>
<label for="website">Website:</label>
<%= Html.TextBox("website") %>
</p>
</fieldset>
</form>
</div>
jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('input').filter('.datepick').datepicker();
$('#popupCreateCompany').dialog(
{
autoOpen: false,
modal: true,
buttons:
{
'Add': function() {
var dialog = $(this);
var form = dialog.find('input:text');
$.post('/company/create', $(form).serialize(), function() {
dialog.dialog('close');
})
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
$("#create-company").click(function() {
$('#popupCreateCompany').dialog('open');
});
On mouseover:
After scroll down:
