Javascript 使用模式弹出式联系人表单，是否可以在提交时在同一弹出式窗口中显示确认？_Javascript_Php_Jquery_Html

Javascript 使用模式弹出式联系人表单，是否可以在提交时在同一弹出式窗口中显示确认？

javascript php jquery html

Javascript 使用模式弹出式联系人表单，是否可以在提交时在同一弹出式窗口中显示确认？,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我有一个非常基本的php电子邮件联系人页面，当用户从模式弹出窗口提交时，该页面会被激活。不必重定向到“thank you.html”页面，是否可以用“thank you”消息填充弹出窗口以下是html： <!DOCTYPE html> <head> <title></title>  <script type="text/javascript" sr

我有一个非常基本的php电子邮件联系人页面，当用户从模式弹出窗口提交时，该页面会被激活。不必重定向到“thank you.html”页面，是否可以用“thank you”消息填充弹出窗口

以下是html：

<!DOCTYPE html>

<head>
<title></title>
<!--Subscribe Popup Function, JQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style>
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: #000;    background: rgba(0,0,0,.8); z-index: 100; display: none; top: 0; left: 0; padding: 0px; border: 0px; margin: 0px;}
.reveal-modal {visibility: hidden;top: 100px; width: 80%;background: #fff;position: absolute;z-index: 101;padding: 0px;border: 0px;margin: 0px 10%;}
</style>
</head>

<body>
<a href="#" data-reveal-id="myModal" data-animation="fade">Subscribe</a></div>
<!-- Subscribe Pop-Up Content -->
<div id="myModal" class="reveal-modal">
<form action="receiving.php" method="POST">
<input type="text" name="email" value="EMAIL" /><br>
<input type="submit" name="submit" value="Submit" />
</form>
</div>          
</body>

</html>


.显示模式背景{位置：固定；高度：100%；宽度：100%；背景：#000；背景：rgba（0,0,0.8）；z索引：100；显示：无；顶部：0；左侧：0；填充：0px；边框：0px；边距：0px；}
.显示模式{可见性：隐藏；顶部：100px；宽度：80%；背景：#fff；位置：绝对；z索引：101；填充：0px；边框：0px；边距：0px 10%；}

下面是“receiving.php”：

如果可以看到这里使用的javascript是“jquery.reveal.js”，请注意，我对js和php非常缺乏经验。这段代码是我的出发点，从这里开始：

（函数（$）{
$（'a[数据显示id'）。live（'click'，函数（e）{
e、 预防默认值（）；
var modalLocation=$（this.attr（'data-discover-id'）；
$（'#'+modalLocation）.discover（$（this.data（））；
});
$.fn.reveal=功能（选项）{
变量默认值={
动画：“fadeAndPop”，//fade，fadeAndPop，无
动画速度：300，//动画有多快
closeonbackgroundclick:true，//如果单击background将关闭吗？
dismissmodalclass:“close-reveal-modal”//将关闭打开模式的按钮或元素的类
}; 
//扩展dem的选项
var options=$.extend（{}，默认值，选项）；
返回此值。每个（函数（）{
var modal=$（此），
topMeasure=parseInt（modal.css（'top'）），
topOffset=模态高度（）+topMeasure，
锁定=错误，
modalBG=$（'.discover modal bg'）；
if（modalBG.length==0）{
modalBG=$（''）。插入后面（模态）；
}           
//入口动画
modal.bind（'leaver:open'，function（）{
modalBG.unbind（'click.modalEvent'）；
$（'..+options.dismissmodalclass）.unbind（'click.modalEvent'）；
如果（！已锁定）{
锁模态（）；
如果（options.animation==“fadeAndPop”）{
css（{'top'：$（document.scrollTop（）-topOffset，'opacity'：0，'visibility'：'visible'}）；
modalBG.fadeIn（options.animationspeed/2）；
modal.delay（options.animationspeed/2）.设置动画({
“top”：$（document.scrollTop（）+topMeasure+'px'，
“不透明度”：1
}，options.animationspeed，unlockModal（））；
}
如果（options.animation==“淡入淡出”）{
css（{'opacity'：0，'visibility'：'visible'，'top'：$（document.scrollTop（）+topmease}）；
modalBG.fadeIn（options.animationspeed/2）；
modal.delay（options.animationspeed/2）.设置动画({
“不透明度”：1
}，options.animationspeed，unlockModal（））；
} 
如果（options.animation==“无”）{
css（{'visibility'：'visible'，'top'：$（document.scrollTop（）+topMeasure}）；
css（{“display”：“block”}）；
解锁模式（）
}
}
模态。解除绑定（“显示：打开”）；
});     
//结束动画
modal.bind（'leaver:close'，函数（）{
如果（！已锁定）{
锁模态（）；
如果（options.animation==“fadeAndPop”）{
modalBG.delay（options.animationspeed）、fadeOut（options.animationspeed）；
模态动画({
“top”：$（document.scrollTop（）-topOffset+'px'，
“不透明度”：0
}，options.animationspeed/2，function（）{
css（{'top'：topmease，'opacity'：1，'visibility'：'hidden'}）；
解锁模式（）；
});                 
}   
如果（options.animation==“淡入淡出”）{
modalBG.delay（options.animationspeed）、fadeOut（options.animationspeed）；
模态动画({
“不透明度”：0
}，options.animationspeed，function（）{
css（{'opacity'：1，'visibility'：'hidden'，'top'：topmease}）；
解锁模式（）；
});                 
}   
如果（options.animation==“无”）{
css（{'visibility'：'hidden'，'top'：topmease}）；
css（{'display'：'none'}）；
}       
}
模态。解除绑定（“显示：关闭”）；
});         
//立即打开模态
modal.trigger（'显示：打开'）
//关闭模态侦听器
var closeButton=$（'.'+options.dismissmodalclass）.bind（'click.modalEvent'，函数（）{
modal.trigger（'显示：关闭'）
});
如果（选项。关闭背景单击）{
css（{“游标”：“指针”}）
modalBG.bind（'click.modalEvent'，函数（）{
modal.trigger（'显示：关闭'）
});
}
$（'body'）.keyup（函数（e）{
if（e.which==27）{modal.trigger（'leaver:close'）；}//27是转义键的键码
});
函数unlockModal（）{
锁定=错误；
}
函数lockmodel（）{
锁定=真；
}   
})；//每次通话
}//动态观察插件调用
})（jQuery）；

您确定这只是在表单中添加id吗比如：

你确定这只是在你的表格中添加id吗比如：

你可以这样做。发送用户邮件后，将用户重定向到当前页面（弹出窗口所在的位置）

现在，在Jquery中，让这个散列匹配它并启动弹出窗口

Jquery

    $(document).ready(function(){
     var hash=window.location.hash;

      if(hash==="#mailsuccess")
          {
     $('#successModal').reveal({ /* options */ }); //You can use same modal or different modal to show success message
          }    

      });

使用简单的AJAX

<!DOCTYPE html>

<head>
<title></title>
<!--Subscribe Popup Function, JQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style>
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: #000;    background: rgba(0,0,0,.8); z-index: 100; display: none; top: 0; left: 0; padding: 0px; border: 0px; margin: 0px;}
.reveal-modal {visibility: hidden;top: 100px; width: 80%;background: #fff;position: absolute;z-index: 101;padding: 0px;border: 0px;margin: 0px 10%;}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(document).on('submit','#mailform',function(e){
       e.preventDefault(); //stop default form submit
       var email=$('#mailform input[name="email"]').val(); //get email from form

       $.ajax({
            type: "POST",
            url: "receiving.php",
            data: "email="+email, 
            cache: false,
            success: function(html){
            if($.trim(html)==='success')
                 { 
                   $('#myModal').trigger('reveal:close'); //close current modal
                   $('#successModal').reveal();  //open success modal
                  }
             }   
            });
    });
});
</script>
</head>

<body>
    <a href="#" data-reveal-id="myModal" data-animation="fade">Subscribe</a></div>
    <!-- Subscribe Pop-Up Content -->
    <div id="myModal" class="reveal-modal">
    <form action="receiving.php" method="POST" id="mailform"> //give a id to form
    <input type="text" name="email" value="EMAIL" /><br>
    <input type="submit" name="submit" value="Submit" />
    </form>
    </div> 

    <div id="successModal" class="reveal-modal">
        Mailed successfully    
    </div>

    </body>

</html>

你可以这样做。发送用户邮件后，将用户重定向到当前页面（弹出窗口所在的位置）

现在，在Jquery中，让这个散列匹配它并启动弹出窗口

Jquery

    $(document).ready(function(){
     var hash=window.location.hash;

      if(hash==="#mailsuccess")
          {
     $('#successModal').reveal({ /* options */ }); //You can use same modal or different modal to show success message
          }    

      });

使用简单的AJAX

<!DOCTYPE html>

<head>
<title></title>
<!--Subscribe Popup Function, JQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style>
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: #000;    background: rgba(0,0,0,.8); z-index: 100; display: none; top: 0; left: 0; padding: 0px; border: 0px; margin: 0px;}
.reveal-modal {visibility: hidden;top: 100px; width: 80%;background: #fff;position: absolute;z-index: 101;padding: 0px;border: 0px;margin: 0px 10%;}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(document).on('submit','#mailform',function(e){
       e.preventDefault(); //stop default form submit
       var email=$('#mailform input[name="email"]').val(); //get email from form

       $.ajax({
            type: "POST",
            url: "receiving.php",
            data: "email="+email, 
            cache: false,
            success: function(html){
            if($.trim(html)==='success')
                 { 
                   $('#myModal').trigger('reveal:close'); //close current modal
                   $('#successModal').reveal();  //open success modal
                  }
             }   
            });
    });
});
</script>
</head>

<body>
    <a href="#" data-reveal-id="myModal" data-animation="fade">Subscribe</a></div>
    <!-- Subscribe Pop-Up Content -->
    <div id="myModal" class="reveal-modal">
    <form action="receiving.php" method="POST" id="mailform"> //give a id to form
    <input type="text" name="email" value="EMAIL" /><br>
    <input type="submit" name="submit" value="Submit" />
    </form>
    </div> 

    <div id="successModal" class="reveal-modal">
        Mailed successfully    
    </div>

    </body>

</html>

你可以这样做。发送用户邮件后，将用户重定向到当前页面（弹出窗口所在的位置）

现在，在Jquery中，让这个散列匹配它并启动弹出窗口

Jquery

    $(document).ready(function(){
     var hash=window.location.hash;

      if(hash==="#mailsuccess")
          {
     $('#successModal').reveal({ /* options */ }); //You can use same modal or different modal to show success message
          }    

      });

使用简单的AJAX

<!DOCTYPE html>

<head>
<title></title>
<!--Subscribe Popup Function, JQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style>
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: #000;    background: rgba(0,0,0,.8); z-index: 100; display: none; top: 0; left: 0; padding: 0px; border: 0px; margin: 0px;}
.reveal-modal {visibility: hidden;top: 100px; width: 80%;background: #fff;position: absolute;z-index: 101;padding: 0px;border: 0px;margin: 0px 10%;}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(document).on('submit','#mailform',function(e){
       e.preventDefault(); //stop default form submit
       var email=$('#mailform input[name="email"]').val(); //get email from form

       $.ajax({
            type: "POST",
            url: "receiving.php",
            data: "email="+email, 
            cache: false,
            success: function(html){
            if($.trim(html)==='success')
                 { 
                   $('#myModal').trigger('reveal:close'); //close current modal
                   $('#successModal').reveal();  //open success modal
                  }
             }   
            });
    });
});
</script>
</head>

<body>
    <a href="#" data-reveal-id="myModal" data-animation="fade">Subscribe</a></div>
    <!-- Subscribe Pop-Up Content -->
    <div id="myModal" class="reveal-modal">
    <form action="receiving.php" method="POST" id="mailform"> //give a id to form
    <input type="text" name="email" value="EMAIL" /><br>
    <input type="submit" name="submit" value="Submit" />
    </form>
    </div> 

    <div id="successModal" class="reveal-modal">
        Mailed successfully    
    </div>

    </body>

</html>

你可以这样做。发送用户邮件后，将用户重定向到当前页面（弹出窗口所在的位置）

现在，在Jquery中，让这个散列匹配它并启动弹出窗口

Jquery

    $(document).ready(function(){
     var hash=window.location.hash;

      if(hash==="#mailsuccess")
          {
     $('#successModal').reveal({ /* options */ }); //You can use same modal or different modal to show success message
          }    

      });

使用简单的AJAX

<!DOCTYPE html>

<head>
<title></title>
<!--Subscribe Popup Function, JQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.reveal.js"></script>
<style>
.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: #000;    background: rgba(0,0,0,.8); z-index: 100; display: none; top: 0; left: 0; padding: 0px; border: 0px; margin: 0px;}
.reveal-modal {visibility: hidden;top: 100px; width: 80%;background: #fff;position: absolute;z-index: 101;padding: 0px;border: 0px;margin: 0px 10%;}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(document).on('submit','#mailform',function(e){
       e.preventDefault(); //stop default form submit
       var email=$('#mailform input[name="email"]').val(); //get email from form

       $.ajax({
            type: "POST",
            url: "receiving.php",
            data: "email="+email, 
            cache: false,
            success: function(html){
            if($.trim(html)==='success')
                 { 
                   $('#myModal').trigger('reveal:close'); //close current modal
                   $('#successModal').reveal();  //open success modal
                  }
             }   
            });
    });
});
</script>
</head>

<body>
    <a href="#" data-reveal-id="myModal" data-animation="fade">Subscribe</a></div>
    <!-- Subscribe Pop-Up Content -->
    <div id="myModal" class="reveal-modal">
    <form action="receiving.php" method="POST" id="mailform"> //give a id to form
    <input type="text" name="email" value="EMAIL" /><br>
    <input type="submit" name="submit" value="Submit" />
    </form>
    </div> 

    <div id="successModal" class="reveal-modal">
        Mailed successfully    
    </div>

    </body>

</html>

这里是一个资源，您可以编辑和使用下载的源代码或在这里看到现场演示

向页面添加一个按钮或链接，如下所示

<p><a href="#inline">click to open</a></p>

“#inline”这里应该是将包含表单的的的“id”

<div id="inline">
 <h2>Send us a Message</h2>
 <form id="contact" name="contact" action="#" method="post">
 <label for="email">Your E-mail</label>
 <input type="email" id="email" name="email" class="txt">
 <br>
 <label for="msg">Enter a Message</label>
 <textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Send E-mail</button>
 </form>
</div>


给我们发个信
你的电子邮件


输入消息
发送电子邮件

包括这些脚本以侦听单击事件。如果表单中定义了操作，则可以使用“preventDefault（）”方法

<div id="inline">
 <h2>Send us a Message</h2>
 <form id="contact" name="contact" action="#" method="post">
 <label for="email">Your E-mail</label>
 <input type="email" id="email" name="email" class="txt">
 <br>
 <label for="msg">Enter a Message</label>
 <textarea id="msg" name="msg" class="txtarea"></textarea>
<button id="send">Send E-mail</button>
 </form>
</div>

<script type="text/javascript">
 $(document).ready(function() {
$(".modalbox").fancybox();
$("#contact").submit(function() { return false; });
$("#send").on("click", function(){
var emailval = $("#email").val();
var msgval = $("#msg").val();
var msglen = msgval.length;
var mailvalid = validateEmail(emailval);
if(mailvalid == false) {
$("#email").addClass("error");
}
else if(mailvalid == true){
 $("#email").removeClass("error");
 }

 if(msglen < 4) {
 $("#msg").addClass("error");
 }
 else if(msglen >= 4){
 $("#msg").removeClass("error");
 }

 if(mailvalid == true && msglen >= 4) {
 // if both validate we attempt to send the e-mail
 // first we hide the submit btn so the user doesnt click twice
 $("#send").replaceWith("<em>sending...</em>");
 //This will post it to the php page
 $.ajax({
 type: 'POST',
 url: 'sendmessage.php',
 data: $("#contact").serialize(),
 success: function(data) {
 if(data == "true") {
 $("#contact").fadeOut("fast", function(){
//Display a message on successful posting for 1 sec
 $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
 setTimeout("$.fancybox.close()", 1000);
 });
 }
 }
 });
 }
 });
 });
</script>