Creating our custom modal

Now that you have learned how to use a Bootstrap modal, let's customize it for our example. First, let's add some content inside our .modal-body and edit .modal-header and .modal-footer a little:

<div class="modal fade" id="tweet-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" 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">Dog a new tweet</h4>
      </div>
      <div class="modal-body">
 <textarea class="form-control" rows="4" placeholder="What you want to bark?" maxlength="140"></textarea>
      </div>
      <div class="modal-footer">
 <span class="char-count pull-left" data-max="140">140</span>
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">
          Tweet
        </button>
      </div>
    </div>
  </div>
</div>

Here, we added a heading to .modal-header, a textarea in .modal-body and a <span> element with the .char-count class in the footer.

The goal here is to type a tweet inside the textarea element and update the character count in the footer to show how many characters are left for the user to enter.

For styling, go to the CSS and add a style rule for .char-count:

#tweet-modal .char-count {
  padding: 0.7rem 0;
}

Refresh the web browser and see the result of the tweet modal, as shown in the following screenshot. Now, we need to add some JavaScript to count the number of remaining characters to tweet.

So, for the JavaScript for the character count, open (or create it if you do not have it yet) the main.js file. Ensure that you have the document ready to create the script, by having the following code in your file:

$(document).ready(function() {
    // add code here
});

Then, we must create a function that updates the remaining characters each time a letter is typed. Therefore, let's create an event handler for keyup.

The keyup event came from jQuery, which has a lot of event handlers that are triggered on different actions. There are also other events such as click, hover, and so on. In this case, keyup will trigger when you release a key that you pressed.

The basic usage to create a bind event is from a selector, call the .on function passing at the first argument of the event type (in this case, keyup), followed by the handler (in our case, a function). Here, we have presented the JavaScript code, and the event handler is in bold so as to highlight the usage:

$(document).ready(function() {
    var $charCount, maxCharCount;

    $charCount = $('#tweet-modal .char-count')
    maxCharCount = parseInt($charCount.data('max'), 10);

 $('#tweet-modal textarea').on('keyup', function(e) {
        var tweetLength = $(e.currentTarget).val().length;

        $charCount.html(maxCharCount - tweetLength);
  });
});