This is part of a plugin I'm creating for training purposes. In one of my pages, I want to overlay another php page. Everything was working fine before I put in my translation tags.
The page displayed in the overlay : The code is displayed on my page but is cut off at <?php
<form class="tracker-rms-form-container" action="" method="post" enctype="multipart/form-data">
<div class="tracker-rms-top-part">
<?php echo '<h2>' . esc_html__( 'Apply Now', 'trackerform' ) . '</h2>'; ?>
<label class="tracker-rms-label required-field"><i><?php esc_html_e( 'required field', 'trackerform' ) ?></i></br></label>
The JS code that displays the overlay :
function loadOverlayContent() {
var overlayContainer = $("<div id='overlayContainer'></div>");
var closeButton = $("<a href='' id='closeOverlayButton'></a>");
// Ajoutez la superposition à la page
$("body").append(overlayContainer);
// Ajoutez un fond noir semi-transparent
var backgroundOverlay = $("<div id='backgroundOverlay'></div>");
$("body").append(backgroundOverlay);
// Appliquer le style pour afficher le fond noir semi-transparent
backgroundOverlay.css({
position: 'fixed',
top: '0',
left: '0',
width: '100%',
height: '100%',
background: 'rgba(0, 0, 0, 0.65)', // Couleur noire avec une opacité de 65%
zIndex: '9998', // Un niveau en dessous de l'overlay
});
// Charger la page PHP via AJAX
$.ajax({
url: "<?php echo esc_url(plugins_url('tracker-rms-form.php', __FILE__)); ?>",
success: function (data) {
// Insérer le contenu de la page PHP dans l'overlayContainer
overlayContainer.html(data);
// Appliquer le style pour afficher l'overlay devant la page
overlayContainer.css({
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
zIndex: '9999', // Ajustez le z-index en fonction de vos besoins
backgroundwidth: '100%',
minWidth: '60%',
maxHeight: '90%',
overflow: 'auto',
scrollbarWidth: 'none',
});
// Ajoutez un bouton de fermeture à l'overlay
overlayContainer.append(closeButton);
// Ajoutez un événement de clic pour le bouton de fermeture
closeButton.on("click", function () {
// Fermez l'overlay lorsqu'on clique sur le bouton de fermeture
overlayContainer.remove();
backgroundOverlay.remove();
});
// Ajouter un gestionnaire d'événements pour détecter les clics en dehors de l'overlay
backgroundOverlay.on("click", function (event) {
if (!$(event.target).closest("#overlayContainer").length) {
// Fermer l'overlay si le clic est en dehors de celui-ci
overlayContainer.remove();
backgroundOverlay.remove();
}
});
},
error: function () {
// Gérer les erreurs en cas de problème lors du chargement de la page PHP
overlayContainer.html("<p>Une erreur s'est produite lors du chargement du contenu.</p>");
}
});
}