使用Magnific Popup顯示模態窗口中的窗體響應

我正在嘗試使用ajax提交窗體並使用Magnific Popup顯示模態窗口上的響應。我已經發布了下面的代碼。在關於使其工作，我必須點擊「發送」按鈕，然後「彈出」按鈕。我在過去的3個小時裏一直在玩，無法使它工作。你能看看我做錯了什麼嗎？我想單擊發送按鈕，並在模態彈出窗口中查看php響應。使用Magnific Popup顯示模態窗口中的窗體響應

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

來源

2016-11-08 hijacker83

調用'$（ '彈出模態'）。magnificPopup（{...'文檔加載室內用後'$（文件）。就緒（）'函數如[documentation]（http://dimsemenov.com/plugins/magnific-popup/documentation.html）中所述。搜索「初始化彈出窗口」。當您使用'.popup-modal'元素可能尚未加載正在嘗試初始化彈出窗口 – Nomeaning25

根據[「inline type」]（http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline-type）的文檔，您沒有正確編寫它，你必須設定項目包含'type'和'src'的參數。看到我的回答 – Nomeaning25

根據"inline type"的文檔，您沒有正確設置它。您必須設置項目參數，其中包含type和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) { 
 
        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' 
 
     } 
 

 
    }); 
 
}); 
 
    \t \t \t 
 
function createSrc(){ 
 
    \t \t \t \t 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>

編輯

由於您使用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> 
 
<script type="text/javascript"> 
 

 
jQuery(document).ready(function() { 
 

 
    $('.popup-modal').on('click', function(e) { 
 
      
 
    \t \t  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' 
 
        }); 
 
       } 
 
      });  
 

 

 
    }); 
 

 
}); 
 
\t \t \t 
 
</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>

編輯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="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>

來源

2016-11-08 09:35:41 Nomeaning25

我將它上傳到http://demo.sbvan.com/test.html，因爲它沒有在jsfiddle上工作，因爲result.php文件。正如你在測試頁面上看到的，我可以提交這些值，並且我可以在控制檯上看到這些值，但模態窗口不顯示php結果。另一方面，我的朋友第一次發送這個解決方案http://demo.sbvan.com/test2.html當彈出按鈕被點擊時，第二次點擊時沒有任何反應，php文件的響應出現在模式窗口上。任何想法爲什麼當點擊第一次按鈕時，它沒有在模式窗口上顯示錯誤消息？ – hijacker83

你能看到http：//demo.sbvan。請/ com/test3.html？仍然似乎沒有工作。我已經將Erdem的帖子上傳到http://demo.sbvan.com/test4.html，它似乎正在工作。它仍然有兩個按鈕。我喜歡你最後的代碼應該工作，但somethinh失蹤。 – hijacker83

@劫機者83我看到你得到它的工作:) – Nomeaning25

<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 { 
 
\t position: relative; 
 
\t background: #FFF; 
 
\t padding: 20px; 
 
\t width: auto; 
 
\t max-width: 500px; 
 
\t margin: 20px auto; 
 
\t } 
 
\t #popup { 
 
\t \t visibility: hidden; \t \t 
 
\t } 
 

 
</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"> 
 
\t \t \t \t <p><a class="popup-modal-dismiss" href="#">Dismiss</a></p> 
 
\t \t \t \t </div> 
 
       </form> 
 
       <script type="text/javascript"> 
 
       \t $("#indexform").submit(function(event) { 
 
\t \t    event.preventDefault(); 
 
\t \t    var formdata = $(this).serialize(); 
 
\t \t    $.ajax({ 
 
\t \t     type: "POST", 
 
\t \t     url: "result.php", 
 
\t \t     data: formdata, 
 
\t \t     success: function(msg) { 
 
\t \t      $("#modal-results").html(msg); 
 
\t \t     }, 
 
\t \t     error: function() { 
 
\t \t      $("#modal-results").html("Failure"); 
 
\t \t     } 
 

 
\t \t    }).done(function() { 
 
\t \t     $('.popup-modal').magnificPopup({ 
 
\t \t      type: 'inline' 
 

 
\t \t     }); 
 
\t \t     $('#popup').click(); 
 
\t \t    }); 
 
\t \t   \t \t }); 
 
       </script> 
 
</body> 
 
</html>

來源

2016-11-08 14:25:45

http://stackoverflow.com/help/how-to-answer – RPichioli

很好用。謝謝。 http://demo.sbvan.com/test4.html這是工作演示。如果只有一個按鈕，會很好。 – hijacker83

使用Magnific Popup顯示模態窗口中的窗體響應

回答

相關問題