blocks|key|383809|text|您还可以创建HTML警报模板，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|383810|<div+class="alert+alert-info"+id="alert_template"+style="display:+none;">
++++<button+type="button"+class="close">×</button>
</div>|code-block|syntax|javascript|383811|所以你可以在JavaScript中这样做：|383812|$("#alert_template+button").after('<span>Some+text</span>');
$('#alert_template').fadeIn('slow');|383813|在我看来这是更干净更快的。此外，在调用fadeIn()时要遵循Twitter+Bootstrap标准。|offset|length|style|CODE|383814|要保证此警报模板也适用于多个呼叫(这样它就不会将新消息添加到旧消息中)，请将以下内容添加到您的JavaScript：|383815|$('#alert_template+.close').click(function(e)+{
++++$("#alert_template+span").remove();
});|383816|因此，每次您通过x按钮关闭警报时，此调用都会删除span元素。|383817|entityMap^0|0|0|0|0|J|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@$M|13|N|14|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

<p>You can also create a HTML alert template like this:</p>

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

<p>And so you can do in JavaScript this here:</p>

<pre><code>$("#alert_template button").after('&lt;span&gt;Some text&lt;/span&gt;');
$('#alert_template').fadeIn('slow');
</code></pre>

<p>Which is in my opinion cleaner and faster. In addition you stick to Twitter Bootstrap standards when calling <code>fadeIn()</code>.</p>

<p>To guarantee that this alert template works also with multiple calls (so it doesn't add the new message to the old one), add this here to your JavaScript:</p>

<pre><code>$('#alert_template .close').click(function(e) {
    $("#alert_template span").remove();
});
</code></pre>

<p>So this call removes the span element every time you close the alert via the x-button.</p>


blocks|key|383841|text|/**
++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+'+%2B++alerttype+%2B+'"><a+class="close"+data-dismiss="alert">×</a><span>'%2Bmessage%2B'</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);
++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|383842|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>/**
  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 "&lt;div id="alert_placeholder"&gt;&lt;/div&gt;"
  Written On - 14-Jun-2013
**/

  function showalert(message,alerttype) {

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

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


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

    }, 5000);
  }
</code></pre>


blocks|key|599783|text|今天发现了这一点，做了一些调整，并结合了其他答案的功能，同时更新到bootstrap+3.x。注:此答案需要jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|599784|在html中：|599785|<div+id="form_errors"+class="alert+alert-danger+fade+in"+style="display:none">|code-block|syntax|javascript|599786|在JS中：|599787|<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>'%2Bmessage%2B'</span></div>');

++if+(timeout+%7C%7C+timeout+===+0)+{
++++setTimeout(function()+{+
++++++$(elem).alert('close');
++++},+timeout);++++
++}
};
</script>​|599788|然后，您可以调用它，如下所示：|599789|bootstrap_alert('#form_errors',+'This+message+will+fade+out+in+1+second',+1000)
bootstrap_alert('#form_errors',+'User+must+dismiss+this+message+manually')|599790|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Found this today, made a few tweaks and combined the features of the other answers while updating it to bootstrap 3.x.  NB: This answer requires jQuery.</p>

<p>In html:</p>

<pre><code>&lt;div id="form_errors" class="alert alert-danger fade in" style="display:none"&gt;
</code></pre>

<p>In JS:</p>

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

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

<p>Then you can invoke this either as:</p>

<pre><code>bootstrap_alert('#form_errors', 'This message will fade out in 1 second', 1000)
bootstrap_alert('#form_errors', 'User must dismiss this message manually')
</code></pre>


blocks|key|383956|text|我创建了一个非常简单和基本的插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|383957|(function($){
++++$.fn.extend({
++++++++bs_alert:+function(message,+title){
++++++++++++var+cls='alert-danger';
++++++++++++var+html='<div+class="alert+'%2Bcls%2B'+alert-dismissable"><button+type="button"+class="close"+data-dismiss="alert"+aria-hidden="true">&times;</button>';
++++++++++++if(typeof+title!=='undefined'+&&++title!==''){
++++++++++++++++html%2B='<h4>'%2Btitle%2B'</h4>';
++++++++++++}
++++++++++++html%2B='<span>'%2Bmessage%2B'</span></div>';
++++++++++++$(this).html(html);
++++++++},
++++++++bs_warning:+function(message,+title){
++++++++++++var+cls='alert-warning';
++++++++++++var+html='<div+class="alert+'%2Bcls%2B'+alert-dismissable"><button+type="button"+class="close"+data-dismiss="alert"+aria-hidden="true">&times;</button>';
++++++++++++if(typeof+title!=='undefined'+&&++title!==''){
++++++++++++++++html%2B='<h4>'%2Btitle%2B'</h4>';
++++++++++++}
++++++++++++html%2B='<span>'%2Bmessage%2B'</span></div>';
++++++++++++$(this).html(html);
++++++++},
++++++++bs_info:+function(message,+title){
++++++++++++var+cls='alert-info';
++++++++++++var+html='<div+class="alert+'%2Bcls%2B'+alert-dismissable"><button+type="button"+class="close"+data-dismiss="alert"+aria-hidden="true">&times;</button>';
++++++++++++if(typeof+title!=='undefined'+&&++title!==''){
++++++++++++++++html%2B='<h4>'%2Btitle%2B'</h4>';
++++++++++++}
++++++++++++html%2B='<span>'%2Bmessage%2B'</span></div>';
++++++++++++$(this).html(html);
++++++++}
++++});
})(jQuery);|code-block|syntax|javascript|383958|用法是|383959|<div+id="error_container"></div>
<script>
$('#error_container').bs_alert('YOUR+ERROR+MESSAGE+HERE+!!',+'title');
</script>|383960|第一个插件，它可以很容易地变得更好|383961|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I created this VERY SIMPLE and basic plugin:</p>

<pre><code>(function($){
    $.fn.extend({
        bs_alert: function(message, title){
            var cls='alert-danger';
            var html='&lt;div class="alert '+cls+' alert-dismissable"&gt;&lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;';
            if(typeof title!=='undefined' &amp;&amp;  title!==''){
                html+='&lt;h4&gt;'+title+'&lt;/h4&gt;';
            }
            html+='&lt;span&gt;'+message+'&lt;/span&gt;&lt;/div&gt;';
            $(this).html(html);
        },
        bs_warning: function(message, title){
            var cls='alert-warning';
            var html='&lt;div class="alert '+cls+' alert-dismissable"&gt;&lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;';
            if(typeof title!=='undefined' &amp;&amp;  title!==''){
                html+='&lt;h4&gt;'+title+'&lt;/h4&gt;';
            }
            html+='&lt;span&gt;'+message+'&lt;/span&gt;&lt;/div&gt;';
            $(this).html(html);
        },
        bs_info: function(message, title){
            var cls='alert-info';
            var html='&lt;div class="alert '+cls+' alert-dismissable"&gt;&lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;';
            if(typeof title!=='undefined' &amp;&amp;  title!==''){
                html+='&lt;h4&gt;'+title+'&lt;/h4&gt;';
            }
            html+='&lt;span&gt;'+message+'&lt;/span&gt;&lt;/div&gt;';
            $(this).html(html);
        }
    });
})(jQuery);
</code></pre>

<p>Usage is</p>

<pre><code>&lt;div id="error_container"&gt;&lt;/div&gt;
&lt;script&gt;
$('#error_container').bs_alert('YOUR ERROR MESSAGE HERE !!', 'title');
&lt;/script&gt;
</code></pre>

<p>first plugin EVER and it can be easily made better</p>


blocks|key|599848|text|我最终使用了带有样式修改Make+toastr+alerts+look+like+bootstrap+alerts的toastr+(https://github.com/CodeSeven/toastr|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|599849|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/15066882/make-toastr-alerts-look-like-bootstrap-alerts|1|https://github.com/CodeSeven/toastr^0|C|19|0|1U|Z|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p>I ended up using toastr (<a href="https://github.com/CodeSeven/toastr" rel="nofollow noreferrer">https://github.com/CodeSeven/toastr</a>) with style modifications  <a href="https://stackoverflow.com/questions/15066882/make-toastr-alerts-look-like-bootstrap-alerts">Make toastr alerts look like bootstrap alerts</a></p>


blocks|key|384033|text|我创建了一个可以在运行时使用的JavaScript类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|384034|在GitHub,+here上已经结束了。|offset|length|384035|那里有一个自述文件，有更深入的解释，但我将在下面做一个快速示例：|384036|var+ba+=+new+BootstrapAlert();
ba.addP("Some+content+here");
$("body").append(ba.render());|code-block|syntax|javascript|384037|上面的代码将创建一个简单的主警报，其中包含一个段落元素，其中包含文本"Some+content+here“。|384038|还有一些选项可以在初始化时设置。|384039|对于您的需求，您可以这样做：|384040|var+ba+=+new+BootstrapAlert({
++++dismissible:+true,
++++background:+'warning'
});
ba.addP("Invalid+Credentials");
$("body").append(ba.render());|384041|render方法将返回一个HTML元素，然后可以将其插入到DOM中。在本例中，我们将其附加到body标记的底部。|style|CODE|384042|这是一个正在进行中的库，但它仍然处于非常好的工作状态。|384043|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/JustCarty/BootstrapAlerts^0|0|1|C|0|0|0|0|0|0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@$D|1A|E|1B|1|1C]]|A|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1I|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1J|8|@$D|1K|E|1L|W|X]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1M|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]]]

<p>FWIW I created a JavaScript class that can be used at run-time.<br>
It's over on <a href="https://github.com/JustCarty/BootstrapAlerts" rel="nofollow noreferrer">GitHub, here</a>.</p>

<p>There is a readme there with a more in-depth explanation, but I'll do a quick example below:</p>

<pre><code>var ba = new BootstrapAlert();
ba.addP("Some content here");
$("body").append(ba.render());
</code></pre>

<p>The above would create a simple primary alert with a paragraph element inside containing the text "Some content here".</p>

<p>There are also options that can be set on initialisation.<br>
For your requirement you'd do:</p>

<pre><code>var ba = new BootstrapAlert({
    dismissible: true,
    background: 'warning'
});
ba.addP("Invalid Credentials");
$("body").append(ba.render());
</code></pre>

<p>The <code>render</code> method will return an HTML element, which can then be inserted into the DOM. In this case, we append it to the bottom of the body tag.</p>

<p>This is a work in progress library, but it still is in a very good working order.</p>


blocks|key|599927|text|简单回顾一下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|599928|​|599929|$(document).ready(function()+{

++++$('button').on(+"click",+function()+{

++++++showAlert(+"OK",+"alert-success"+);

++++}+);

});

function+showAlert(+message,+alerttype+)+{

++++$('#alert_placeholder').append(+$('#alert_placeholder').append(
++++++'<div+id="alertdiv"+class="alert+alert-dismissible+fade+in+'+%2B++alerttype+%2B+'">'+%2B
++++++++++'<a+class="close"+data-dismiss="alert"+aria-label="close"+>×</a>'+%2B
++++++++++'<span>'+%2B+message+%2B+'</span>'+%2B+
++++++'</div>'+)
++++);

++++//+close+it+in+3+secs
++++setTimeout(+function()+{
++++++++$("#alertdiv").remove();
++++},+3000+);

}|code-block|syntax|javascript|599930|<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"+/>

<script++src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
++++++++
<button+onClick=""+>Show+Alert</button>
++++++
<div+id="alert_placeholder"+class="container"+></div>|599931|599932|codepen|offset|length|599933|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/antelove/pen/MWgvPVZ^0|0|0|0|0|0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

<p>just recap:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

    $('button').on( "click", function() {

      showAlert( "OK", "alert-success" );

    } );

});

function showAlert( message, alerttype ) {

    $('#alert_placeholder').append( $('#alert_placeholder').append(
      '&lt;div id="alertdiv" class="alert alert-dismissible fade in ' +  alerttype + '"&gt;' +
          '&lt;a class="close" data-dismiss="alert" aria-label="close" &gt;×&lt;/a&gt;' +
          '&lt;span&gt;' + message + '&lt;/span&gt;' + 
      '&lt;/div&gt;' )
    );

    // close it in 3 secs
    setTimeout( function() {
        $("#alertdiv").remove();
    }, 3000 );

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" /&gt;

&lt;script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
        
&lt;button onClick="" &gt;Show Alert&lt;/button&gt;
      
&lt;div id="alert_placeholder" class="container" &gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://codepen.io/antelove/pen/MWgvPVZ" rel="nofollow noreferrer">codepen</a></p>


blocks|key|384080|text|function+bootstrap_alert()+{
++++++++create+=+function+(message,+color)+{
++++++++++++$('#alert_placeholder')
++++++++++++++++.html('<div+class="alert+alert-'+%2B+color
++++++++++++++++++++%2B+'"+role="alert"><a+class="close"+data-dismiss="alert">×</a><span>'+%2B+message
++++++++++++++++++++%2B+'</span></div>');
++++++++};
++++++++warning+=+function+(message)+{
++++++++++++create(message,+"warning");
++++++++};
++++++++info+=+function+(message)+{
++++++++++++create(message,+"info");
++++++++};
++++++++light+=+function+(message)+{
++++++++++++create(message,+"light");
++++++++};
++++++++transparent+=+function+(message)+{
++++++++++++create(message,+"transparent");
++++++++};
++++++++return+{
++++++++++++warning:+warning,
++++++++++++info:+info,
++++++++++++light:+light,
++++++++++++transparent:+transparent
++++++++};
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|384081|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function bootstrap_alert() {
        create = function (message, color) {
            $('#alert_placeholder')
                .html('&lt;div class="alert alert-' + color
                    + '" role="alert"&gt;&lt;a class="close" data-dismiss="alert"&gt;×&lt;/a&gt;&lt;span&gt;' + message
                    + '&lt;/span&gt;&lt;/div&gt;');
        };
        warning = function (message) {
            create(message, "warning");
        };
        info = function (message) {
            create(message, "info");
        };
        light = function (message) {
            create(message, "light");
        };
        transparent = function (message) {
            create(message, "transparent");
        };
        return {
            warning: warning,
            info: info,
            light: light,
            transparent: transparent
        };
    }
</code></pre>


<p>I'm using Bootstrap 2.0 for my project and I would like to dynamically add Bootstrap alert box in my page (<a href="http://twitter.github.com/bootstrap/javascript.html#alerts" rel="noreferrer">http://twitter.github.com/bootstrap/javascript.html#alerts</a>). I want to do something like:</p>

<pre><code>bootstrap-alert.warning("Invalid Credentials"); 
</code></pre>


Dynamically create Bootstrap alerts box through JavaScript

jQuery

我正在为我的项目使用Bootstrap2.0，我想在我的页面()中动态添加Bootstrap警告框。我想做一些类似的事情：bootstrap-alert.warning("Invalid Credentials"); 

问通过JavaScript动态创建引导警报框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过JavaScript动态创建引导警报框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问通过JavaScript动态创建引导警报框
EN