简体   繁体   English

几秒钟后隐藏iframe内容

[英]Hide iframe content after a few seconds

On my website, I have a contact form. 在我的网站上,我有一个联系表。 When user fills out the form and presses the send button, a message is displayed under the form. 当用户填写表格并按下发送按钮时,表格下方会显示一条消息。 I want the message to hide itself after a few seconds. 我希望消息在几秒钟后隐藏起来。 I also want to possibly style the message with color and center alignment etc. 我还想用颜色和居中对齐等样式设置消息样式。

HTML HTML

<div class="container">
    <form action="form_process.php" method="post" name="contact_form" target="myIframe">
        <div class="row">
            <div class="col-md-4">
                <input type="text" class="form-control" name="name" id="name" placeholder="Your Name" required>
                <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
                <input type="text" class="form-control" name="sub" id="sub" placeholder="Subject" required>


            </div>
            <div class="col-md-8">
                <textarea class="form-control" name="msg" id="msg" rows="15" cols="10" placeholder="Your Message" required></textarea>
                <button type="submit" name="submit" class="btn btn-default submit-btn form-submit">SEND</button>
            </div>
        </div>
    </form>
    <div class="iframe-div">
        <iframe name="myIframe" id="myIframe">

        </iframe>
    </div>
</div>  

CSS CSS

.iframe-div {
    text-align:center;
    color: #3978bd;
}
#myIframe {

    frameborder:0;
    border:0 ;
    cellspacing:0;
    border-style: none;
    width: 100%;
    height: 60px;
}

PHP PHP

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $sub = $_POST['sub'];
    $msg = $_POST['msg'];

    $message=$_POST['message']. 'Name: ' . $name . '"\n"Email: ' . $email. '"\n"Subject: ' . $sub;
    $to = 'sample@gmail.com';
    $subject = 'New Message';

    mail($to, $subject, $message, $msg);
    echo "Your Message has been sent";
?>

You could use something like this : 您可以使用如下所示的内容:

$('.iframe-div').fadeIn('slow', function () {
    $(this).delay(3000).fadeOut('slow');
});

Of course, you should add it to the success logic of your script. 当然,您应该将其添加到脚本的success逻辑中。
Hope this helps. 希望这可以帮助。

SYA :) SYA :)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM