Search code examples
phpformsmodal-dialogmagnific-popup

Loading PHP webform in Magnific Popup Modal

I have been creating a some web form's for the purpose of setting up meeting request for IT equipment.

I have the a pre-made form (equip_meeting.php) that is Styled with CSS that I want to load in Magnific Popup Modal.

Once the data is entered and validations are confirmed the form will submit the data to a equip_meeting_mail.php page to be formatted for email deliver to a designated email box.

The modal will close and the user will be sent to the confirmation page outputted with the success message of the Mail send.

I am using the following test page code and the php form will not load.

Below is the Popup Page Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" type="text/css" href="itform.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script> 
<script language="javascript">
$(function () {
    $('.popup-modal').magnificPopup({
        type: 'inline',
        preloader: false,
        modal: true
    });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});

  $(function() {
    $( "#Borrow_Date" ).datepicker();
    $( "#Return_Date" ).datepicker();
  });

   $(function() {
    $( document ).tooltip();
  });
</script>
</head>
<body>
<!-- link that opens popup -->
<a class="popup-modal" href="#form">Open modal</a>

<!-- form itself -->
<div id="form" class="container white-popup-block mfp-hide">
<?php include "equip_meeting.php" ?>
<center><p><a class="popup-modal-dismiss" href="#">Dismiss</a></p></center>
</div>

</body>
</html>

The page being opened is a styled form page.

Solution

  • Apparently single quotes around the equip_meeting.php resolved this issue.