窗体上的模态窗口
Posted
技术标签:
【中文标题】窗体上的模态窗口【英文标题】：Modal window on a form 【发布时间】：2013-12-22 14:30:45 【问题描述】：有没有办法在跳过输入时弹出模态窗口？
例如，如果有人忘记输入他们的电子邮件，我当前的 php 邮件文件会打开一个空白页面，上面写着请输入电子邮件，但我想要一个模式窗口（最好带有图像），在不离开我的页面的情况下说同样的话。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="refresh" content="9;URL=Thankyou.html">
</head>
<?php
$EmailFrom = "mail@live.com";
$EmailTo = "mail@live.com";
$Subject = "REQUEST";
$Name = check_input($_POST['Name']);
$Phone = check_input($_POST['Phone']);
$Email = check_input($_POST['Email'], "Enter a Email");
$Message = check_input($_POST['Message']);
if (! preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $Email))
show_error("E-mail address not valid");
if ($Email != 'Email')
$message = "Name: ".$Name;
$message .= "\n\nEmail: ".$Email;
$message .= "\n\nPhone: ".$Phone;
$message .= "\n\nMessage: ".$Message;
$success = mail($EmailTo, $Subject, $message, "From: <$EmailFrom>");
if ($success)
echo '<META HTTP-EQUIV="Refresh" Content="0; URL=Thankyou.html">';
exit;
else
print ("<b>I'm sorry, there was a technical glitch, please send your email to me@gmysite.com directly.</b>");
else
echo "Please fill the required fields, thankyou";
function check_input($data, $problem = '')
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
if ($problem && strlen($data) == 0)
show_error($problem);
return $data;
function show_error($myError)
?>
<html>
<body>
<p>Please correct the following error:</p>
<strong><?php echo $myError; ?></strong>
</body>
</html>
<?php
exit();
?>
【问题讨论】：
你需要javascript。到目前为止你有什么，你在哪里遇到任何问题？ 脚本没有问题，运行正常。但发生的情况是，当有人没有输入他们的电子邮件并点击发送时，脚本打开会离开我的页面并给出消息“请输入电子邮件”，但我想要的是如果该人点击发送时弹出一个模态痘电子邮件 只需通过 Ajax 发送您的表单，然后检查答案...如果答案包含错误，那么您可以提醒它。 【参考方案1】：HTML5 标准包括 dialog element 和一个用于打开和关闭它的 javascript api。但是，这还不支持跨浏览器。您始终可以使用polyfill 强硬，这将允许您在跨浏览器支持之前使用对话框元素。
【讨论】：
【参考方案2】：有几个解决方案。
最简单的方法是将html5 required 属性添加到所需的表单字段中。但是，这不会为您提供任何带有图像的弹出窗口的选项，只是在现代浏览器中警告用户在填写该字段之前无法提交表单。
要在同一页面上添加全局弹出窗口，您需要 javascript。只需在提交表单时检查是否有任何必填字段为空，如果有则显示全局覆盖。不过你得自己写...
【讨论】：
以上是关于窗体上的模态窗口的主要内容，如果未能解决你的问题，请参考以下文章