使用Magnific Popup在模态窗口中显示窗体响应 [英] show the form response in modal window using Magnific Popup
本文介绍了使用Magnific Popup在模态窗口中显示窗体响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用ajax提交表单，并使用Magnific Popup在模式窗口上显示响应。我已经发布了下面的代码。在关于使其工作，我必须点击发送按钮，然后弹出按钮。我在过去的3个小时里一直在玩，无法使它工作。你能看看我做错了什么吗？我想点击发送按钮，并在模态弹出窗口中看到php响应。
< html>
< head>
< script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js>< / script>
< script src =https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js>< / script>
< script type =text / javascript>
jQuery（document）.ready（function（）{
$ b $（document）.on（'click'，'.popup-modal'，function（e）{
$（#indexform）.on（submit，function（event）{
event.preventDefault（）;
var formdata = $（this）.serialize（）;
$ .ajax（{
type：POST，
url：result.php，
data：formdata，
success：function（msg）{
$（＃modal-results）。html（msg）
，
错误：function（）{
alert（failure）;
}）;
}）;
}）;
$（'。popup-modal'）。 magnificPopup（{
type：'inline'
}）;
}）;
< / script>
< link rel =stylesheethref =https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css>
< style>
div＃modal-results {
color：white;
}
< / style>
< / head>
< body>
< form method =postname =indexid =indexform>
< input type =textname =nameplaceholder =NAME>
< input type =textname =emailplaceholder =EMAIL>
< input name =sendDatatype =submitvalue =SEND>
< button type =submitclass =popup-modalhref =＃modal-results> Popup< / button>
< div id =modal-results>< / div>
< / form>
< / body>
< / html>
解决方案
内嵌类型。您必须设置包含类型和 src 的项目参数。
我创建了一个函数createSrc，它在按下按钮时被调用。它创建用于模态对话框的< div> 元素。我也为这个窗口添加了样式。
< html> < HEAD> < script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js>< / script> < script src =https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js>< / script> < script type =text / javascript> jQuery（document）.ready（function（）{$（document）.on（'click'，'.popup-modal'，function（e）{$（#indexform）.on（submit，function事件）{event.preventDefault（）; var formdata = $（this）.serialize（）; $ .ajax（{type：POST，url：result.php，data：formdata，success：function（msg） {$（＃modal-results）。html（msg）}，error：function（）{alert（failure）;}}）;}）;}）; $（'。popup-modal'）。 magnificPopup（{items：{src：createSrc（），type：'inline'}}）;}）;函数createSrc（）{return< div class ='white-popup'> + jQuery（＃name）。val（）+< br> +< / div>;}< / script> < link rel =stylesheethref =https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css> <风格> div＃modal-results {color：white; } .white-popup {position：relative;}。背景：#FFF; padding：20px;宽度：自动; max-width：500px; margin：20px auto; }< / style> < /头> <身体GT; < form method =postname =indexid =indexform> < input id =nametype =textname =nameplaceholder =NAME> < input id =emailtype =textname =emailplaceholder =EMAIL> < textarea id =messagerows =3name =messageplaceholder =MESSAGE>< / textarea> < input name =sendDatatype =submitvalue =SEND> < button type =submitclass =popup-modalhref =＃modal-results> Popup< / button> < div id =modal-results>< / div> < /形式> < /体> < / html>
由于您使用的是ajax，因此您不需要< form> 标签。我修改了你的朋友代码。您也重复POST请求调用。拳头点击没有做一个POST请求，所以不能显示错误，因为你在弹出窗口时重写了它。第二次点击获得了1个POST请求，第三次点击发送了2个POST请求，第4个等等。
请尝试以下代码：
< html>< head>< script src =https：//cdnjs.cloudflare。
com / ajax / libs / jquery / 1.11.2 / jquery.min.js>< / script>< script src =https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery .magnific-popup.js>< /脚本> < script type =text / javascript> jQuery（document）.ready（function（）{$（'.popup-modal'）。on（'click'，function（e）{console.log（$（this）.serialize（））; var formdata = $ （this）.serialize（）; $ .ajax（{type：POST，url：http://demo.sbvan.com//result.php，data：formdata，success：function（msg）{$ （'＃modal-results）。html（msg）; $（'。popup-modal'）。magnificPopup（{type：'inline'}）;}，error：function（）{$（＃modal-results ）.html（failure）; $（'。popup-modal'）。magnificPopup（{type：'inline'}）;}}）;}）;}）; < /脚本> < link rel =stylesheethref =https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css> <风格> div＃modal-results {color：white;}< / style>< / head> <身体GT; < input type =textname =nameplaceholder =NAME> < input type =textname =emailplaceholder =EMAIL> < textarea rows =3name =messageplaceholder =MESSAGE>< / textarea> <！ - < input name =sendDatatype =submitvalue =SEND> - > < button class =popup-modalhref =＃modal-results> Popup< / button> < div id =modal-results>< / div> < / body>< / html>
b
$ b
编辑2：
您也可以使用funciont创建弹出式窗口，无需按钮。所以在你点击提交后调用该函数。但请记住，您的表单中没有使用任何ACTION标签，因此不需要将输入类型提交。请将它设置为按钮。您通过AJAX提交。
< head>
< script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js>< / script>
< script src =https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js>< / script>
< link rel =stylesheethref =https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css>
< style>
.white-popup {
position：relative;
背景：#FFF;
padding：20px;
width：auto;
max-width：500px;
margin：20px auto;
}
#popup {
visibility：hidden;
}
< / style>
< / head>
< body>
< form method =postname =indexid =indexform>
< input type =textname =nameplaceholder =NAME>< br />
< input type =textname =emailplaceholder =EMAIL>< br />
< textarea rows =3name =messageplaceholder =MESSAGE>< / textarea>< br />
< input name =sendDataid =sendDatatype =buttonvalue =SEND>
< div id =modal-resultsclass =white-popup mfp-hide>
< p>< a class =popup-modal-dismisshref =＃>关闭< / a>< / p>
< / div>
< / form>
< script type =text / javascript>
jQuery（document）.ready（function（）{
$ b $（'#sendData'）。on（'click'，function（e）{
console.log（$（this）.serialize（））;
var formdata = $（this）.serialize（）;
$ .ajax（{
type：POST，
url：result.php，
data：formdata，
success：function（msg）{
$（＃modal-results）。html（msg）;
$ .magnificPopup.open（{
items：{
src：'＃modal-results'，
type：'inline'
}
}）;
}，
error：function（）{
$（＃modal-results）。html（failour）;
$ .magnificPopup.open（{
items：{
src：'＃modal-results'，
type：'inline'
}
}）;
}
}）;
}）;
}）;
< / script>
< / body>
< / html>
I am trying to submit a form using ajax and show the response on modal window using Magnific Popup. I have posted the code below. In regarding to make it work I have to click "send" button then "popup" button. I was playing with for the last 3 hours and couldn't make it work. Can you please see what I am doing wrong? I want to click to send button and see the php responses on the modal popup window.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$(document).on('click', '.popup-modal', function (e) {
$( "#indexform" ).on( "submit", function( event ) {
event.preventDefault();
var formdata = $(this).serialize();
$.ajax({
type:"POST",
url:"result.php",
data:formdata,
success: function(msg){
$("#modal-results").html(msg)
},
error:function(){
alert("failure");
}
});
});
});
$('.popup-modal').magnificPopup({
type: 'inline'
});
});
</script>
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<style>
div#modal-results {
color: white;
}
</style>
</head>
<body>
<form method="post" name="index" id="indexform">
<input type="text" name="name" placeholder="NAME">
<input type="text" name="email" placeholder="EMAIL">
<textarea rows="3" name="message" placeholder="MESSAGE"></textarea>
<input name="sendData" type="submit" value="SEND">
<button type="submit" class="popup-modal" href="#modal-results">Popup</button>
<div id="modal-results"></div>
</form>
</body>
</html>
解决方案
you are not seting it correctly, based on documentation for "inline type". You have to set items paramater that contains type and src.
I created a function createSrc that is called when button is pressed. It creates an <div> element that is used for modal dialog. I also added the style for this window.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$(document).on('click', '.popup-modal', function (e) {
$( "#indexform" ).on( "submit", function( event ) {
event.preventDefault();
var formdata = $(this).serialize();
$.ajax({
type:"POST",
url:"result.php",
data:formdata,
success: function(msg){
$("#modal-results").html(msg)
},
error:function(){
alert("failure");
}
});
});
});
$('.popup-modal').magnificPopup({
items: {
src: createSrc(),
type: 'inline'
}
});
});
function createSrc(){
return "<div class='white-popup'>" + jQuery("#name").val() + "<br>" + "</div>";
}
</script>
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<style>
div#modal-results {
color: white;
}
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
</style>
</head>
<body>
<form method="post" name="index" id="indexform">
<input id="name" type="text" name="name" placeholder="NAME">
<input id="email" type="text" name="email" placeholder="EMAIL">
<textarea id="message" rows="3" name="message" placeholder="MESSAGE"></textarea>
<input name="sendData" type="submit" value="SEND">
<button type="submit" class="popup-modal" href="#modal-results">Popup</button>
<div id="modal-results"></div>
</form>
</body>
</html>
EDIT
Since you are using ajax, you don't need <form> tag. I modified your friends code. You were also duplicting POST request calls. Fist click didn't do a POST request and so couldnt show an error, because you rewrote it when you initalized the popup. The second click got 1 POST request, the third click sent 2 POST requests, the forth 3 and so on.
Try the code below:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$( '.popup-modal').on('click', function(e) {
console.log( $(this).serialize() );
var formdata = $(this).serialize();
$.ajax({
type: "POST",
url: "http://demo.sbvan.com//result.php",
data: formdata,
success: function(msg) {
$("#modal-results").html(msg);
$('.popup-modal').magnificPopup({
type: 'inline'
});
},
error: function() {
$("#modal-results").html("failure");
$('.popup-modal').magnificPopup({
type: 'inline'
});
}
});
});
});
</script>
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<style>
div#modal-results {
color: white;
}
</style>
</head>
<body>
<input type="text" name="name" placeholder="NAME">
<input type="text" name="email" placeholder="EMAIL">
<textarea rows="3" name="message" placeholder="MESSAGE"></textarea>
<!--<input name="sendData" type="submit" value="SEND">-->
<button class="popup-modal" href="#modal-results">Popup</button>
<div id="modal-results"></div>
</body>
</html>
EDIT 2:
You can also create pop-up with funciont, without button. So call that function after you click on submit. But remember, you are not using any ACTION tag in your form so there is no need to have your input type "submit". Set it ot "button" instead. You are submiting it via AJAX.
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<style>
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
#popup {
visibility: hidden;
}
</style>
</head>
<body>
<form method="post" name="index" id="indexform">
<input type="text" name="name" placeholder="NAME"><br/>
<input type="text" name="email" placeholder="EMAIL"><br/>
<textarea rows="3" name="message" placeholder="MESSAGE"></textarea><br/>
<input name="sendData" id="sendData" type="button" value="SEND">
<div id="modal-results" class="white-popup mfp-hide">
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
$( '#sendData').on('click', function(e) {
console.log( $(this).serialize() );
var formdata = $(this).serialize();
$.ajax({
type: "POST",
url: "result.php",
data: formdata,
success: function(msg) {
$("#modal-results").html(msg);
$.magnificPopup.open({
items: {
src: '#modal-results',
type: 'inline'
}
});
},
error: function() {
$("#modal-results").html("failour");
$.magnificPopup.open({
items: {
src: '#modal-results',
type: 'inline'
}
});
}
});
});
});
</script>
</body>
</html>
这篇关于使用Magnific Popup在模态窗口中显示窗体响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
