JavaScript를 통해 동적으로 부트 스트랩 경고 상자 생성

JavaScript를 통해 동적으로 부트 스트랩 경고 상자 생성

---

내 프로젝트에 Bootstrap 2.0을 사용하고 있으며 내 페이지 ( http://twitter.github.com/bootstrap/javascript.html#alerts ) 에 Bootstrap 경고 상자를 동적으로 추가하고 싶습니다 . 다음과 같이하고 싶습니다.

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

---

이것을 시도하십시오 (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 와 같이이 프로세스를 단순화하고 간소화하는 라이브러리가 있습니다.

---

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

---

다음과 같이 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 요소를 제거합니다.

---

이 아주 간단하고 기본 플러그인을 만들었습니다.

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

첫 번째 플러그인은 쉽게 만들 수 있습니다.

---

오늘 이것을 발견하고 몇 가지 조정하고 다른 답변의 기능을 결합하면서 부트 스트랩 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')

---

FWIW 런타임에 사용할 수있는 JavaScript 클래스를 만들었습니다. 여기 GitHub
에서 끝났습니다 .

더 자세한 설명이있는 readme가 있지만 아래에서 간단한 예를 들어 보겠습니다.

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

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

There are also options that can be set on initialisation.
For your requirement you'd do:

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

The render 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.

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

---

I ended up using toastr (https://github.com/CodeSeven/toastr) with style modifications Make toastr alerts look like bootstrap alerts

---

I found that AlertifyJS is a better alternative and have a Bootstrap theme.

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

Also have a 4 components: Alert, Confirm, Prompt and Notifier.

Exmaple: JSFiddle

---

just recap:

$(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="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>

codepen

ReferenceURL : https://stackoverflow.com/questions/10082330/dynamically-create-bootstrap-alerts-box-through-javascript