我正在尝试在div中显示错误消息(具有叠加效果),该错误消息在发生服务器端错误时会回显。一切正常,除了在实际的div在主页上显示之前,错误还会在主页上显示一秒钟左右。我已经提到了许多解决方案,但是在显示实际的div之前,似乎没有什么可以阻止主页上不必要的回声显示。我使用的是PHP,而不是专家。在这方面的帮助将不胜感激。我刚刚在页面开始处放置的php代码,即在标记之前:
<?php
session_start();
ob_start();
if(isset($_POST["submit"])){
$fname = filter_input(INPUT_POST, 'fname');
$lname = filter_input(INPUT_POST, 'lname');
$email = filter_input(INPUT_POST, 'email');
$concept = filter_input(INPUT_POST, 'concept');
$design = filter_input(INPUT_POST, 'design');
$pformance = filter_input(INPUT_POST, 'pformance');
$features = filter_input(INPUT_POST, 'features');
$service = filter_input(INPUT_POST, 'service');
$support = filter_input(INPUT_POST, 'support');
$ucomments = filter_input(INPUT_POST, 'message');
date_default_timezone_set("Asia/Kolkata");
$date= date("Y-m-d");
$time= date("H:i:s");
$hash= md5(rand(0,1000));
// validate inputs
if(empty($fname)){
$errors[] = "First name left blank";
}
elseif((!preg_match('/^[A-Z][a-z]{3,19}$/',$fname))) {
$errors[] = "Error in first name";
}
if(empty($lname)){
$errors[] = "Last name left blank";
}
elseif((!preg_match('/^[A-Z][a-z]{2,19}$/',$lname))) {
$errors[] = "Error in last name";
}
if(empty($email)){
$errors[] = "Email-Id left blank";
}
elseif((!preg_match('/^[A-Za-z0-9_]+\@[A-Za-z0-9_]+\.[A-Za-z0-9_]+/',$email))) {
$errors[] = "Invalid Email-Id";
}
if ($concept==NULL){
$errors[] = "View on Concept reqd.";
}
if ($design==NULL){
$errors[] = "View on Design reqd.";
}
if ($pformance==NULL){
$errors[] = "View on Performance reqd.";
}
if ($features==NULL){
$errors[] = "View on Features reqd.";
}
if ($service==NULL){
$errors[] = "View on Service reqd.";
}
if ($support==NULL){
$errors[] = "View on Support reqd.";
}
if(empty($ucomments)){
$errors[] = "Enter suggestions";
}
elseif((!preg_match('/^[A-Z1-9][a-zA-Z0-9\s,.-]{3,}$/',$ucomments))) {
$errors[] = "Error in suggestion";
}
if($errors){
echo '<div class="alertboxoc">';
echo '<div id="emsg" class="alertboxmain">';
echo '<div class="alertboxhdr"><i class="fa fa-exclamation-circle" style="color:#FF0000"></i> <span style="color:#FF0000">Error</span></div>';
echo '<div class="alertboxerrors">';
echo '<ul class="aberrors">';
foreach ($errors as $error) {
echo '<li class="aberrors">' . $error . '</li>';
}
echo '</ul>';
echo '</div>';
echo '<div class="alertboxftr">Close</div>';
echo '</div>';
echo '</div>';
}
// if no error run insert sql
elseif(!$errors) {
echo '<div class="alertboxoc">';
echo '<div id="emsg" class="alertboxmain">';
echo '<div class="alertboxhdr"><i class="fa fa-check-circle" style="color:#009900"></i> <span style="color:#009900">Success</span></div>';
echo '<div class="alertboxinfo">Feedback successfully submitted.<br>Thank you!</div>';
echo '<div class="alertboxftr">Close</div>';
echo '</div>';
echo '</div>';
}
}
ob_end_flush();
?>
应该在发生错误时回显的div的css放在内,如下所示:
<style>
.alertboxoc {
position:fixed;
width:100%;
height:100%;
margin:0 auto;
top:0;
left:0;
opacity:1;
background-color:rgba(0, 0, 0, 0.5);
z-index:2;
box-sizing: border-box;
}
.alertboxmain {
position:relative;
top:5%;
margin: 0 auto;
padding:5px;
width:280px;
height:auto;
overflow: auto;
background-color:#FFFFFF;
border:1px solid #021812;
border-radius:4px;
box-shadow: 1px 1px 1px #333333;
box-sizing: border-box;
}
.alertboxhdr {
margin:5px auto;
width:96%;
height:30px;
text-align:left;
line-height: 24px;
font-family:"Arial";
font-size: 16px;
font-weight: normal;
border-bottom:1px solid #333333;
box-sizing: border-box;
}
.alertboxerrors {
margin:5px auto;
width:96%;
min-height:160px;
height:auto;
overflow:auto;
text-align:left;
line-height: 22px;
font-family:"Arial";
font-size: 14px;
font-weight: normal;
height: 22px;
color:#333333;
box-sizing: border-box;
}
.alertboxinfo {
margin:5px auto;
width:96%;
min-height:130px;
height:auto;
overflow:auto;
text-align:center;
line-height: 22px;
vertical-align:middle;
font-family:"Arial";
font-size: 14px;
font-weight: normal;
height: 22px;
color:#333333;
box-sizing: border-box;
}
.alertboxftr {
margin: 5px auto;
width:96%;
/*margin-bottom:5px;*/
line-height: 24px;
text-align:center;
font-family:"Arial";
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
cursor: pointer;
background-color: #05920F;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
border:1px dotted #077A0F;
border-radius: 3px;
box-sizing: border-box;
}
.alertboxftr:hover {
color: #FFFF66;
}
ul.aberrors {
list-style-type: square;
list-style-position: inside;
padding-left: 5px;
margin-top: 2px;
margin-left: 5px;
font-family: "Arial";
font-size: 14px;
color: #333333;
padding-right:5px;
text-align:justify;
}
ul li.aberrors {
text-align: justify;
line-height: 22px;
}
</style>
如果在分析文档的<body>
和<head>
标记之前输出<style>
级HTML内容,则将导致显示未样式化的内容,其持续时间将取决于页面呈现时间。您首先要模糊掉一堆HTML(在不属于该空间的HTML中),然后进行“哦,嘿,P.S。请像这样设置它的样式”。结果将是结构上格式错误/无效的HTML文档,具体取决于所使用的浏览器,其呈现方式可能如此。
您将要为错误div缓冲HTML,仅将其作为<body>
的一部分(用户可见输出所属的部分)输出。然后,代替以下内容:
if($errors){
echo '<div class="alertboxoc">';
echo '<div id="emsg" class="alertboxmain">';
...
您将在验证例程后执行以下操作:
if($errors){
$error_html = '';
$error_html .= '<div class="alertboxoc">';
$error_html .= '<div id="emsg" class="alertboxmain">';
...
...并且也摆脱了ob
例程。然后,在代码中开始输出<body>
级HTML的位置,只需:
if (!empty($error_html)) {
echo $error_html;
}
在不确切知道如何处理其余页面输出的情况下,这与解决故障的答案一样多。我相信它会为您指明正确的方向。