Dailog with a lot of HTML unbearably slow
When I have a dialog with a lot of content, it is unbearably slow to
open and close. This can even cause the browser to freeze. I was
wondering if anyone had any ideas or solutions or if maybe I should
use something else for dialogs with a lot of content. The following
HTML will replicate the problem.
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.ui.js"></script>
<script type="text/javascript">
$(function() {
$('#dialogTest').dialog({
autoOpen: false,
resizable: false,
modal: true,
overlay: {
opacity: 0.3,
background: 'black'
},
height: 344,
width: 560
});
$('#openDialog').click(function() {
$('#dialogTest').dialog('open');
});
});
</script>
</head>
<body>
<a href="javascript:;" id="openDialog">Open Dialog!</a>
<div id="dialogTest">
<table>
<tr>
<td>Column 1<input type="hidden" /><input
type="hidden" /><input type="hidden" /><input type="hidden" /></td>
<td>Column 2<input type="hidden" /><input
type="hidden" /><input type="hidden" /><input type="hidden" /></td>
<td>Column 3<input type="hidden" /><input
type="hidden" /><input type="hidden" /><input type="hidden" /></td>
<td>Column 4<input type="hidden" /><input
type="hidden" /><input type="hidden" /><input type="hidden" /></td>
<td>Column 5<input type="hidden" /><input
type="hidden" /><input type="hidden" /><input type="hidden" /></td>
</tr> [[[[ REPEAT THIS TR A LOT ]]]]
</table>
</div>
</body>
</html>