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 に答える