窗体上的模态窗口答案

【问题标题】：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 发送您的表单，然后检查答案...如果答案包含错误，那么您可以提醒它。

标签： php html css email

【解决方案1】：

HTML5 标准包括 dialog element 和一个用于打开和关闭它的 javascript api。但是，这还不支持跨浏览器。您始终可以使用polyfill 强硬，这将允许您在跨浏览器支持之前使用对话框元素。

【讨论】：

【解决方案2】：

有几个解决方案。

最简单的方法是将html5 required 属性添加到所需的表单字段中。但是，这不会为您提供任何带有图像的弹出窗口的选项，只是在现代浏览器中警告用户在填写该字段之前无法提交表单。

要在同一页面上添加全局弹出窗口，您需要 javascript。只需在提交表单时检查是否有任何必填字段为空，如果有则显示全局覆盖。不过你得自己写...

【讨论】：