CODEWITHSUNDEEP
expressmodal-dialogejs
DuncanG
DuncanG

Reputation: 113

Simple Express EJS Modal

Hi I am new to Node Js and express. I have previously written web pages in Bootstrap and created some nice content. Now I want to create more advance web applications.

I am not using Angular or React. I want to simply write every thing Express and EJS. Where I am struggling is with a good clear examples of creating a Modal within an EJS template. All the examples I can find are either Bootstrap, React or Angular specific.

Can anyone point me at a good resource to learn how to code a working EJS modal template, with detailed explanations of the Events, Listeners and BodyPaser controllers.

Thanks

Duncan

Upvotes: 0

Views: 11797

Answers (1)

DuncanG
DuncanG

Reputation: 113

Ok after a fair bit of looking about the web I found a great simple Youtube example Creating quick, simple popup boxes of a Html Css and Java Popup, which I was able to convert to an EJS temple and Sass styling.

From the Html example and created the following include statement into my main index ejs page.

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

I am using include statements and partial templates so I do not have to repeat code across pages and instead used modules that are brought in from a central folder.

The bottom of the index.ejs has a call so some Javascripts like this.

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

The modal template looks like this.

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

The Modal Sass looks like this

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

And the Javascript looks like this

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

All that is happening is, the javascript is using the onclick function of the 'A' tag or button to toggle the display class of the div id 'contact-popup', between 'block' (the display default) and 'none'. 'block' displays the Popup over the top of the main page, while 'none' hides the Popup.

Because its so simple its easy to build and fairly robust.

Upvotes: 3

Related Questions