Question

有没有办法在跳过输入时弹出模态窗口？

例如，如果有人忘记输入他们的电子邮件，我当前的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();
}
?>

Answer 1

有一些解决方案。

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

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

Answer 2

HTML5标准包含dialog element和javascript api以打开和关闭它。但是，这还不支持跨浏览器。你总是可以使用polyfill tough，这将允许你在跨浏览器支持之前使用dialog元素。

表单上的模态窗口

2 个答案: