Partage
  • Partager sur Facebook
  • Partager sur Twitter

Executer du html/css en javascript

9 octobre 2019 à 11:33:19

Bonjour,

J'aimerai creer une modal (en html, css et php) des que l'utilisateur clic sur une icone.

Quand il clic sur l'icone ca m'envoie vers la fonction modal() en javascript.

Jusque la tout fonctionne bien, mais j'arrive pas a faire exécuter mon code de la modal dans la fonction en js.

Et le code de la modal que je veux executer dans la fonction js (modal()) :

<div class='w3-container'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='https://www.w3schools.com/w3css/4/w3.css'>
    <img src='../images/logo_loupe.png' width='20' style='text-align: center;' onclick="document.getElementById('id01').style.display='block'">

    <div id="id01" class="w3-modal">
        <div class="w3-modal-content" style="margin-bottom: 10% !important;">
            <header class="w3-container w3-teal">
        <span onclick="document.getElementById('id01').style.display='none'"
              class="w3-button w3-display-topright">&times;</span>
                <h2 style="text-align: center;">Choisissez une référence à ajouter au devis</h2>
            </header>
            <div class="w3-container">

                <table class="tftable" border="1">

                    <style type="text/css">
                        .tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;}
                        .tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}
                        .tftable tr {background-color:#d4e3e5;}
                        .tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
                        .tftable tr:hover {background-color:#ffffff;}
                    </style>

                    <table class="tftable" border="1" style="margin-top: 2%; margin-bottom: 2%;">
                        <tr><th style="text-align: center;">Référence</th><th style="text-align: center;">Type</th><th style="text-align: center;">Famille</th><th style="text-align: center;">Marque</th><th style="text-align: center;">Désignation</th><th style="text-align: center;">Stock</th><th style="text-align: center;">Tarif</th><th style="text-align: center;">Ajouter</th></tr>

                        <?php
                            for ($i = 0; $i != $taille_tableau; $i++)
                            {
                                ?>
                                    <tr>
                                        <td> <?php echo $tableau_general_produits[$i][1] ?></td>
                                        <td> <?php echo $tableau_general_produits[$i][2] ?></td>
                                        <td> <?php echo $tableau_general_produits[$i][3] ?></td>
                                        <td> <?php echo $tableau_general_produits[$i][4] ?></td>
                                        <td> <?php echo $tableau_general_produits[$i][5] ?></td>
                                        <td style='text-align: center;'> <?php echo $tableau_general_produits[$i][6] ?></td>
                                        <td> <?php echo $tableau_general_produits[$i][7] ?></td>
                                        <td style='text-align: center;'><a href="./nouveau_devis_2.php?articleID=<?php echo $tableau_general_produits[$i][0] ?>"><img src='../images/logo_check_vert.png' width='20'/></a></td>
                                    </tr>
                                <?php
                            }
                        ?>

                    </table>


                </table>
            </div>
        </div>
    </div>
</div>

Merci de votre aide.

  • Partager sur Facebook
  • Partager sur Twitter
La connaissance ne vaut que si elle est partagée.
10 octobre 2019 à 15:05:14

Salut,

L'HTML ne s’exécute pas tu utilises un terme erroné voila juste pour que tu le saches.

Le soucis de ton code c'est que la fonction modal en js affichera juste une modale c'est à dire une fenêtre modale avec le texte que tu entres dans la fonction point. Tu n'as pas la possibilité d'utiliser cette modale afin d'y insérer un template. En fait une modale c'est juste une petite fenêtre qui s'affiche devant le site (en gros). Du coup la méthode c'est juste de créer ta modale en HTML  / CSS avec un display: none par exemple et de l'afficher grâce à du js au click ;) !

  • Partager sur Facebook
  • Partager sur Twitter
Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité