Question

我正在尝试使用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() {

               $(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>

Answer 1

根据"inline type"的文档，您没有正确设置它。您必须设置包含type和src的项目参数。

我创建了一个按下按钮时调用的函数createSrc。它创建一个<div>元素，用于模态对话框。我还为这个窗口添加了样式。

＆＃13;

<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>

＆＃13;

修改

由于您使用的是ajax，因此您不需要<form>标记。我修改了你的朋友代码。您还复制了POST请求调用。拳头点击没有执行POST请求，因此无法显示错误，因为您在弹出弹出窗口时重写了它。第二次点击获得1个POST请求，第三次点击发送2个POST请求，第三次点击等等。

尝试以下代码：

＆＃13;
＆＃13;
<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>  <button class="popup-modal" href="#modal-results">Popup</button> <div id="modal-results"></div> </body> </html>
＆＃13;
＆＃13;
＆＃13;

编辑2：

您还可以使用funciont创建弹出窗口，不带按钮。所以在点击提交后调用该函数。但请记住，您没有在表单中使用任何ACTION标记，因此无需输入您的输入类型＆＃34;提交＆＃34;。设置ot＆＃34;按钮＆＃34;代替。您是通过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>

Answer 2

<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> 

    <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" type="submit" value="SEND">
                <button  type="submit" id="popup" class="popup-modal" href="#modal-results">Popup</button>                
                <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">
                	$("#indexform").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() {
		                    $("#modal-results").html("Failure");
		                }

		            }).done(function() {
		                $('.popup-modal').magnificPopup({
		                    type: 'inline'

		                });
		                $('#popup').click();
		            });
		       		});
                </script>
</body>
</html>

使用Magnific Popup

2 个答案: