ブートストラップ警告が自動的に消えないようにするにはどうすればよいですか？

ボタンをクリックしてアラートを表示し、そのボタンが閉じられるまでアラートを表示します。ブートストラップ警告が自動的に消えないようにするにはどうすればよいですか？

ボタンを押すたびに画面上に警告が点滅します。

通知が閉じられるまで表示されますが、ボタンを再度クリックしても表示されません。

任意のアイデア？

HTML

<div class="form-group"> 
    <div class="col-lg-10 col-lg-offset-2"> 
    <button type="submit" class="btn btn-primary">Submit</button> 
    <div class="alert alert-dismissible alert-success"> 
     <button type="button" class="close" data-dismiss="alert">&times;</button> 
     <strong>Completed!</strong> Form successfully submitted... 
    </div> 
    </div> 
</div>

CSS

<style> 
    .alert { 
     display: none; 
    } 
</style>

<script> 
    $(document).ready(function() { 
     $('button').click(function() { 
      $('.alert').show() 
     }) 
    }); 
</script>

出典

2016-05-01 girthquake

これを試してみてください。 See DEMO

data-dismiss="alert"を使用すると、alert divが完全に削除されます。だから、このようにしてみてください。

<body> 
    <button type="submit" class="btn btn-primary">Submit</button> 
    <div class="alert alert-dismissible alert-success"> 
     <button type="button" class="close">&times;</button> 
     <strong>Completed!</strong> Form successfully submitted... 
    </div> 
</body>

JS：

$(document).ready(function(){ 
    $('button').click(function(){ 
     $('.alert').show() 
    }); 

    $('button').click(function(){ 
     $(this).parents('div').hide(); 
    }); 
});

CSS：

.alert{ 
    display: none; 
}

出典

2016-05-01 03:22:21

が、それはボタンがページを更新します私のWebフォームにいくつかの理由で、jsfiddleに適しています。 – girthquake

@rks、送信ボタンがページをリフレッシュしている場合、 'event.preventDefault（）;' –

を使用できます。 'event.preventDefault（）;'を使用してもページがリロードされません。私のページではなくjsfiddleで作業している理由がわからないのですが、私のウェブフォームに何か問題があるかもしれないと思います。 – girthquake

ブートストラップ警告が自動的に消えないようにするにはどうすればよいですか？

答えて

関連する問題