页面加载时不需要的空模式答案

【问题标题】：Unwanted Empty Modal on Page Load页面加载时不需要的空模式
【发布时间】：2017-12-09 12:38:39
【问题描述】：

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

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

提前感谢您的任何建议。

<?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>

【问题讨论】：

stackoverflow.com/questions/2513051/…

标签： javascript jquery modal-dialog

【解决方案1】：

您可以通过在使用$_POST["submit"] 提交表单时调用dialog init 来防止这种情况，例如：

<script>
     <?php if( isset( $_POST["submit"] ) ){ ?> 
         $('#error').dialog({
             height: 380,
             width: 260,
             modal: true,
             resizable: false,
             dialogClass: 'no-close error-dialog'
         });
     <?php } ?>
</script>

【讨论】：