Динамически создавать окно оповещения Bootstrap через JavaScript

Я использую Bootstrap 2.0 для своего проекта и хочу динамически добавить окно оповещения Bootstrap на своей странице (http://twitter.github.com/bootstrap/javascript.html#alerts). Я хочу сделать что-то вроде:

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

ОТВЕТЫ

Ответ 1

Попробуйте это (см. рабочий пример этого кода в 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>​

EDIT: теперь существуют библиотеки, которые упрощают и упрощают этот процесс, например bootbox.js

Ответ 2

/**
  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);
  }

Ответ 3

Вы также можете создать шаблон предупреждения 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();
});

Таким образом, этот вызов удаляет элемент span каждый раз, когда вы закрываете предупреждение с помощью кнопки x.

Ответ 4

Я создал этот ОЧЕНЬ ПРОСТОЙ и основной плагин:

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

Использование

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

первый плагин EVER, и его можно легко сделать лучше

Ответ 5

Нашел это сегодня, сделал несколько настроек и объединил функции других ответов, обновив их до загрузки 3.x. NB: для этого ответа требуется 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')

Ответ 6

FWIW Я создал класс JavaScript, который можно использовать во время выполнения.
Это на GitHub, здесь.

Там есть readme с более подробным объяснением, но ниже я приведу небольшой пример:

var ba = new BootstrapAlert();
ba.addP("Some content here");
$("body").append(ba.render());

Выше было бы создать простое первичное оповещение с элементом абзаца внутри, содержащим текст "Некоторое содержимое здесь".

Есть также параметры, которые можно установить при инициализации.
Для вашего требования вы должны сделать:

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

Метод render вернет HTML-элемент, который затем можно вставить в DOM. В этом случае мы добавляем его в конец тега body.

Это библиотека в стадии разработки, но она все еще находится в очень хорошем рабочем состоянии.

Ответ 8

Я обнаружил, что AlertifyJS является лучшей альтернативой и имеет тему Bootstrap.

alertify.alert('Alert Title', 'Alert Message!', function(){ alertify.success('Ok'); });

Также есть 4 компонента: Предупреждение, Подтвердить, Подсказка и Notifier. > .

Exmaple: JSFiddle

Ответ 9

просто резюмируем:

$(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 ' +  alerttype + '">' +
          '<a class="close" data-dismiss="alert" aria-label="close" >×</a>' +
          '<span>' + message + '</span>' + 
      '</div>' )
    );

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

}
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css'; return false;" />

<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>