4

在此示例中，单击contact导航菜单上的选项卡将打开一个引导模式。如果用户在模态框的文本框中输入小于 10 的字符串，则会出现警告并且模态框不会关闭。如果字符串大于 10，那么一条消息将附加到模态中，说类似success...的内容，并且模态应该延迟一个咒语然后消失。使用当前代码，验证部分和显示的模式可以正常工作，但在它消失之前没有延迟。为什么当前代码不起作用，我该如何解决？

小提琴 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();
            });
        });
4

2 回答 2

10

您应该使用setTimeout而不是delay，延迟适用于动画队列。

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

演示

于 2013-11-12T21:14:48.990 回答
1

我会选择设置超时的普通javascript方法：

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 秒感觉有点长），但这适用于附加的小提琴http://jsfiddle.net/BAJ8X/4/

于 2013-11-12T21:14:53.337 回答