Simple Express EJS Modal

Question

Salut, je suis nouveau à Node Js et express. J'ai déjà écrit des pages Web dans Bootstrap et créé du contenu sympa. Maintenant, je veux créer plus d'applications web avancées.

Je n'utilise pas Angular ou React. Je veux simplement écrire chaque chose Express et EJS. Là où je me bats, il y a de bons exemples de création d'un modal dans un modèle EJS. Tous les exemples que je peux trouver sont spécifiques à Bootstrap, React ou Angular. Est-ce que n'importe qui peut m'indiquer une bonne ressource pour apprendre comment coder un modèle modal d'EJS fonctionnant, avec des explications détaillées des contrôleurs d'événements, d'auditeurs et de BodyPaser.

Merci

Duncan

Answer 1

Ok après un peu juste de regarder sur le Web, je trouve un exemple simple Youtube Creating quick, simple popup boxes d'un Popup Html Css et Java, que j'ai pu convertir en un temple EJS et le style Sass. À partir de l'exemple Html et créé l'instruction include suivante dans ma page d'index principal ejs

<!-- CONTACT MODAL --> <div class="popup-position" id="contact-popup"> <%- include('./partials/modal'); %> </div>

J'utilise inclure des déclarations et des modèles partiels, donc je ne dois pas répéter le code à travers les pages et les modules au lieu utilisés qui sont amenés à partir d'un dossier central.

Le bas de l'index.ejs a un appel donc certains scripts Java comme celui-ci.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <script src="js/contact_modal.js"></script> 

Le modèle modal ressemble à ceci.

<div class="popup-wrapper"> 
<div id="popup-container"> 
    <h5>Contact Us</h5> 
    <form> 
     <div class="form-group"> 
      <label for="name">Name</label> 
      <input type="text" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <label for="email">Email</label> 
      <input type="email" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <label for="message">Message</label> 
      <textarea class="form-control"></textarea> 
     </div> 
    </form> 
    <div class="modal-footer"> 
     <button class="btn btn-primary btn-block">Submit</button> 
     <p><a herf="javascript:void(0)" onclick="toggle_visibility('contact-popup');">Close Popup</a></p> 
    </div> 
</div> 

Le Modal Sass ressemble à ceci

// A Dark Overlay that sits between the main page and the modal so the Modal pops out 
.popup-position{ 
    display:none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0.7); 
    width: 100%; 
    height: 100%; 

// The Modal Wrapper 
} 
#popup-wrapper{ 
text-align: left; 
} 

//The Modal Container 
#popup-container{ 

    background-color: #fff; 
    padding: 20px; 
    border-radius: 10px; 
    width: 300px; 
    margin: 70px auto; 

    a{ 
     cursor: pointer; 
    } 
} 

Et Java ressemble à ceci

//Modal Popup Controller 
function toggle_visibility(id){ 
    var e = document.getElementById(id); 

if(e.style.display == 'block') 
    e.style.display = 'none'; 
else 
    e.style.display = 'block'; 
} 

Tout ce qui se passe est, la java en utilisant la fonction onclick la balise 'A' ou le bouton pour basculer la classe d'affichage de l'ID div 'contact-popup', entre 'block' (l'affichage de faute) et «aucun». 'block' affiche le popup en haut de la page principale, tandis que 'none' cache le popup.

Parce que c'est si simple, facile à construire et assez robuste.