Question

我创建了一个带有图像的表单，我想在我网站的主页上弹出。表格弹出，但我遇到的问题很少。

表格有奇怪的边缘。
我希望将提交按钮移动到feilds下
我希望他们按提交和电子邮件来找我
如果他们只想关闭表单，我想在右上方放一个X.

这是我到目前为止所拥有的 jsfiddle

HTML

<form method="post" action="mailto:youremail@youremail.com">
    <h1>
    Get a Quote
    </h1>
      <input id="name" type="text" name="name" placeholder="Name"><br>
      <input id="email" type="text" name="email" placeholder="Email"><br>
      <input id="payment" type="text" name="payment" placeholder="Avg. Monthly Payment" /><br>
  <!-- Now this is the button which closes the popup-->
<div class="panel-footer">
<button id="close" >submit</button>

CSS

form{
  background-image: url("paper.gif");
  background-repeat: no-repeat;
  margin: auto;
  position: realtive;
  width: 550px;
  height: 450px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  color: #09C;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #999;
  border: inset 1px solid #333;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

input#name{
  margin-top: 200px;
}

input#name,#email, #payment {
  float: right;
  margin-bottom: 10px;
  margin-right: 15px;
  clear: both;
  width: 200px;
  display: block;
  border: 1px solid #999;
  height: 20px;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  padding: 2px;
}

.panel-footer{
  float:right;
}

JS

$(document).ready(function () {
    //select the POPUP FRAME and show it
    $("#popup").hide().fadeIn(1000);

    $("#close").on("click", function (e) {
        e.preventDefault();
        $("#popup").fadeOut(1000);
    });
});

Answer 1

您可以将以下代码放在主页上

<div class="popupwrapper">    
    <div class="backgoround_pop">
    </div>
    <div class="newmessage">
           <div class="closebutton"> close</div>
    <form method="post" action="">
        <h1>
        Get a Quote
        </h1>
          <input id="name" type="text" name="name" placeholder="Name"><br>
          <input id="email" type="text" name="email" placeholder="Email"><br>
          <input id="payment" type="text" name="payment" placeholder="Avg. Monthly Payment" /><br>
      <!-- Now this is the button which closes the popup-->
            <div class="panel-footer">
            <input type="submit" name="submit_form" value="submit">
            </div>
        </form>
    </div>
</div>
<?php if(isset($_POST['submit_form'])){//sample email code you need to change if required
                            $name=$_POST['name'];                               
                            $email=$_POST['email'];

                            $payment=$_POST['payment'];
                            $to = 'youremail@youremail.com';
                                $subject = 'subject';
                                $headers = "From: " . strip_tags($_POST['emailadd']) . "\r\n";
                                $headers .= "Reply-To: ". strip_tags($_POST['emailadd']) . "\r\n";
                                $headers .= "CC: \r\n";
                                $headers .= "MIME-Version: 1.0\r\n";
                                $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";      
                                $message = '<html><body>';
                                $message .= '<h1>Contact Information</h1>';
                                $message .= '<table><tr><td>Name:</td><td>'.$name.'</td><tr>';

                                $message .= '<tr><td>Email:</td><td>'.$email.'</td><tr>';

                                $message .= '<tr><td>payment:</td><td>'.$payment.'</td><tr></table>';
                                $message .= '</body></html>';
                                if(mail($to, $subject, $message, $headers)){
                                    echo "<script>alert('Email Sent Successfully.');</script>";
                                }

                        }?>

脚本

<script type="text/javascript">
    jQuery(document).ready(function(){
        $('.backgoround_pop').click(function(){
            $('.backgoround_pop').hide();
            $('.newmessage').hide();
        });
        $('.closebutton').click(function(){
            $('.backgoround_pop').hide();
            $('.newmessage').hide();
        });
    });
</script>

CSS

.closebutton {
    background: url(../images/close.png) no-repeat left;
    padding: 0 10px;
    text-transform: capitalize;
    background-position:2%
}
.backgoround_pop {
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    left:0;
    opacity: 0.6;
}

html在网站主页上弹出表格

1 个答案: