Bootstrap模态框立即关闭，应该延迟

Question

在这个例子中，单击导航菜单上的contact选项将打开一个Bootstrap模态框。如果用户在模态框的文本框中输入少于10个字符的字符串，则会弹出警告并且模态框不会关闭。如果字符数大于10，则会在模态框中添加一条消息，例如success...，然后模态框应该延迟一段时间后消失。目前的代码可以进行验证和显示模态框，但在它消失之前没有延迟。为什么目前的代码无法工作，我该如何修复？ 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();
            });
        });

- wootscootinboogie

Answer 1

你应该使用setTimeout代替delay，delay只能用于动画队列。

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

演示

- PSL

---

完美。为什么我们要在这里使用window对象？ - wootscootinboogie

@wootscootinboogie 嗯，这只是为了明确地表达。在这种情况下，您不需要这样做，但如果您有一个闭包，其中有另一个setTimeout的实现，并且您实际上想调用窗口的那个，这会有所帮助... - PSL

Answer 2

我会选择使用纯JavaScript的setTimeout方法来设置超时：

if (validResult) {
                var successMessage = $('<div>').text('Successfully saved to database...').css('color', 'green');
                $('.modal-body').append(successMessage);
                window.setTimeout(function() { 
                $('#contact').modal('hide'); }, 500);
            }

这只配置了0.5秒（5秒有点长），但是在附带的fiddle中有效http://jsfiddle.net/BAJ8X/4/。

- Ricky Hartmann