The Bootstrap framework has a Modal component that serves a similar purpose to Modal dialogs in desktop applications. You pop up the Modal, it prevents interaction with other parts of the web page, you enter stuff into fields in the Modal, and then click a button to make it close.

This new segment of code replaces the existing segment defining the Edit and Delete buttons, in views/noteview.hbs:

{{#if user}}
{{#if notekey}}
    <div class="row"><div class="col-xs-12">
    <div class="btn-group">
        <a class="btn btn-outline-dark" href="/notes/destroy?key=
        {{notekey}}" 
            role="button">Delete</a>
        <a class="btn btn-outline-dark" href="/notes/edit?key=
        {{notekey}}" 
            role="button">Edit</a>
        <button type="button" class="btn btn-outline-dark" 
            data-toggle="modal" 
            data-target="#notes-comment-modal">Comment</button> 
    </div>
    </div></div>

    <div id="noteMessages"></div> 
{{/if}}
{{/if}}

This adds support for posting comments on a note. The user will see a Modal pop-up window in which they write their comment. We'll show the code for the Modal later.

We added a new button labeled Comment that the user will click to start the process of posting a message. This button is connected to the Modal by way of the element ID specified in the data-target attribute. The ID will match the outermost div wrapping the Modal. This structure of div elements and class names are from the Bootstrap website at http://getbootstrap.com/docs/4.0/components/modal/.

Let's add the code for the Modal at the bottom of views/noteview.hbs.

{{> footerjs}}

{{#if notekey}}
{{#if user}}
<div class="modal fade" id="notes-comment-modal" tabindex="-1" 
      role="dialog" aria-labelledby="noteCommentModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered" role="document">
   <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-
         label="Close"> 
         <span aria-hidden="true">&times;</span> 
         </button> 
         <h4 class="modal-title" id="noteCommentModalLabel">Leave a 
         Comment</h4> 
     </div>
     <div class="modal-body">
       <form method="POST" id="submit-comment" class="well" data-async  
             data-target="#rating-modal" action="/notes/make-comment"> 
         <input type="hidden" name="from" value="{{ user.id }}"> 
         <input type="hidden" name="namespace" value="/view-
         {{notekey}}"> 
         <input type="hidden" name="key" value="{{notekey}}"> 
         <fieldset> 
           <div class="form-group"> 
             <label for="noteCommentTextArea"> 
             Your Excellent Thoughts, Please</label> 
             <textarea id="noteCommentTextArea" name="message" 
                       class="form-control" rows="3"></textarea> 
           </div> 
 
           <div class="form-group"> 
             <div class="col-sm-offset-2 col-sm-10"> 
               <button id="submitNewComment" type="submit" class="btn 
               btn-default">
               Make Comment</button> 
             </div> 
           </div> 
         </fieldset> 
      </form> 
   </div>
 </div>
 </div>
</div>
{{/if}} 
{{/if}} 

The key portion of this is the HTML form contained within the div.modal-body element. It's a straightforward, normal Bootstrap, augmented form with a normal Submit button at the bottom. A few hidden input elements are used to pass extra information inside the request.

With the HTML set up this way, Bootstrap will ensure that this Modal is triggered when the user clicks on the Comment button. The user can close the Modal by clicking on the Close button. Otherwise, it's up to us to implement code to handle the form submission using AJAX so that it doesn't cause the page to reload.