How can I display a php page in my overlay using WPML tags?

46 Views Asked by At

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>");
        }
    });
}
0

There are 0 best solutions below