Einfach Express EJS Modal

Question

Hallo ich bin neu zu Node Js und Express. Ich habe zuvor Webseiten in Bootstrap geschrieben und einige nette Inhalte erstellt. Jetzt möchte ich mehr fortgeschrittene Web-Anwendungen erstellen.

Ich verwende keine Angular oder React. Ich möchte einfach alles Express und EJS schreiben. Wo ich kämpfe ist mit einem guten, klaren Beispielen für die Erstellung eines Modal innerhalb einer EJS-Vorlage. Alle Beispiele, die ich finden kann, sind entweder Bootstrap, React oder Angular spezifisch.

Kann mir jemand auf eine gute Ressource verweisen, um zu lernen, wie man eine funktionierende EJS modale Vorlage mit detaillierten Erklärungen der Events, Listener und BodyPaser-Controller zu programmieren.

Dank

Duncan

Answer 1

Ok, nachdem ein gutes Stück von der Suche über das Web fand ich ein großes einfaches Beispiel Youtube Creating quick, simple popup boxes eine Html Css und Java Popup, die ich zu einem EJS Tempel konvertieren konnte und Sass Styling.

Aus dem HTML-Beispiel und erstellt die folgende include-Anweisung in meine Hauptindex ejs Seite.

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

Ich verwende enthalten Aussagen und Teilvorlagen so habe ich keinen Code über mehrere Seiten wiederholen und stattdessen verwendet Module, die gebracht werden, in von einem zentralen Ordner.

Das Ende der index.ejs hat einen Aufruf, so dass einige Java-Skripte wie folgt.

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

Die modale Vorlage sieht so aus.

<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> 

Der Modal Sass sieht wie folgt aus

// 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; 
    } 
} 

Und die Java sieht wie folgt aus

//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'; 
} 

Alles, was geschieht, die Java mit der Onclick Funktion der 'A' Tag oder Button, um die Anzeigeklasse der div id 'contact-popup', zwischen 'block' (die Anzeige de Fehler) und "keine". 'Block' zeigt das Popup über dem Anfang der Hauptseite an, während 'none' das Popup versteckt.

Weil es so einfach ist, einfach zu bauen und ziemlich robust.