61

プロジェクトに Bootstrap 2.0 を使用しており、自分のページ ( http://twitter.github.com/bootstrap/javascript.html#alerts )に Bootstrap アラート ボックスを動的に追加したいと考えています。私は次のようなことをしたい:

bootstrap-alert.warning("Invalid Credentials");
4

10 に答える 10

87

これを試してください (jsfiddle でこのコードの実例を参照してください: http://jsfiddle.net/periklis/7ATLS/1/ )

<input type = "button" id = "clickme" value="Click me!"/>
<div id = "alert_placeholder"></div>
<script>
bootstrap_alert = function() {}
bootstrap_alert.warning = function(message) {
            $('#alert_placeholder').html('<div class="alert"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
        }

$('#clickme').on('click', function() {
            bootstrap_alert.warning('Your text goes here');
});
</script>​

編集: bootbox.jsなど、このプロセスを簡素化および合理化するライブラリがあります。

于 2012-04-14T20:00:22.737 に答える
42 
/**
  Bootstrap Alerts -
  Function Name - showalert()
  Inputs - message,alerttype
  Example - showalert("Invalid Login","alert-error")
  Types of alerts -- "alert-error","alert-success","alert-info","alert-warning"
  Required - You only need to add a alert_placeholder div in your html page wherever you want to display these alerts "<div id="alert_placeholder"></div>"
  Written On - 14-Jun-2013
**/

  function showalert(message,alerttype) {

    $('#alert_placeholder').append('<div id="alertdiv" class="alert ' +  alerttype + '"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')

    setTimeout(function() { // this will automatically close the alert and remove this if the users doesnt close it in 5 secs


      $("#alertdiv").remove();

    }, 5000);
  }
于 2013-06-14T22:36:42.123 に答える
9

次のような HTML アラート テンプレートを作成することもできます。

<div class="alert alert-info" id="alert_template" style="display: none;">
    <button type="button" class="close">×</button>
</div>

したがって、ここで JavaScript でこれを行うことができます。

$("#alert_template button").after('<span>Some text</span>');
$('#alert_template').fadeIn('slow');

私の意見では、これはよりクリーンで高速です。さらに、 を呼び出すときは、Twitter Bootstrap 標準に固執しますfadeIn()。

このアラート テンプレートが複数の呼び出しでも機能することを保証するには (新しいメッセージが古いメッセージに追加されないようにするため)、これを JavaScript に追加します。

$('#alert_template .close').click(function(e) {
    $("#alert_template span").remove();
});

したがって、この呼び出しは、x ボタンでアラートを閉じるたびに span 要素を削除します。

于 2013-05-23T12:31:00.480 に答える
4

今日これを見つけ、いくつかの調整を行い、他の回答の機能を組み合わせて、ブートストラップ 3.x に更新しました。注意: この回答には jQuery が必要です。

HTMLで：

<div id="form_errors" class="alert alert-danger fade in" style="display:none">

JS で:

<script>
//http://stackoverflow.com/questions/10082330/dynamically-create-bootstrap-alerts-box-through-javascript
function bootstrap_alert(elem, message, timeout) {
  $(elem).show().html('<div class="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button><span>'+message+'</span></div>');

  if (timeout || timeout === 0) {
    setTimeout(function() { 
      $(elem).alert('close');
    }, timeout);    
  }
};
</script>​

次に、これを次のいずれかの方法で呼び出すことができます。

bootstrap_alert('#form_errors', 'This message will fade out in 1 second', 1000)
bootstrap_alert('#form_errors', 'User must dismiss this message manually')
于 2014-01-01T14:28:39.293 に答える