Bootstrap modal closing immediately, should delay

Question

In this example clicking on the contact tab on the nav menu will open up a bootstrap modal. If the user enters in a string into the modal's text box of less than 10, there's a warning and the modal doesn't close. If the string is greater than ten then a message will be appended to the modal saying something like success... and the modal should delay for a spell and then disappear. With the current code the validation part and the modal showing up works, but there is no delay before it dissappears. Why isn't the current code working and how can I fix it?

fiddle js

$(document).ready(function () {

            $('#modalClose').click(function () {
                var validResult = getLength('#tbName', 10);
                if (validResult) {
                    var successMessage = $('<div>').text('Successfully saved to database...').css('color', 'green');
                    $('.modal-body').append(successMessage);
                    $('#contact').delay(5000).modal('hide');
                }
                else {
                    alert('input did not meet validation, try again');
                    $('#tbName').val('').focus();
                }
            });
            function getLength(el, x) {
                var len = $(el).val().length
                return len > x
            }
            $('#contact').on('hide.bs.modal', function () {
                $('#tbName').val('');
            });
            $('#contact').on('shown.bs.modal', function () {
                $('#tbName').focus();
            });
        });

Answer 1

You should use setTimeout instead of delay, delay works on animation queues.

  window.setTimeout(function(){
     $('#contact').modal('hide');
  }, 2000); //2000 milliseconds i.e 2 seconds, you can change it to the value as you need

Demo