页面加载时不需要的空模态

Question

我使用jquery对话作为模式来使用php来显示我的表单错误。一切正常，除了页面加载外，显示正确...显示空模式。如果你关闭它然后继续填写模态按预期工作的形式，在它单击的提交按钮时显示错误（如果有的话）。为简洁起见，我只包含了相关代码。

我正在寻求有关如何防止空模式在页面加载时显示的帮助。我已经回顾了几十个相关的提交内容，并试图尝试实施它们，结果令人沮丧。在大多数情况下，它们要么没有效果，要么最终禁用模态。

在此先感谢您的任何建议。

<?php

/// php error checking and form processing here ///

?>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" media="screen" />
</head>
<body>

<form action="<?=$_SERVER['PHP_SELF']?>" name="inquiry" method="post">

/// form fields here ///

<ul class="actions">
<li><input type="submit" class="button small" name="submit" id="submit" value="Send Inquiry" /></li>
</ul>

</form>

<div id="error" title="Form Errors:">
<?php
if (!empty($errors))
{
echo "<div style="padding:15px 15px 0 15px">";
echo "<ul style="margin-bottom:20px">";
foreach ($errors as $error)
echo "<li style="font-size:15px; padding:5px">$error</li>";
echo "</ul></div>";
}
?>
</div>

<!-- JS at the end -->

<script src="/assets/js/jquery.min.js"></script><!-- ver: 1.11.3 -->

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  

<script>
$('#error').dialog({
height: 380,
width: 260,
modal: true,
resizable: false,
dialogClass: 'no-close error-dialog'
});
</script>

</body>
</html>