简体   繁体   中英

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

<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

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

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

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.
Hope this helps.

SYA :)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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