web-dev-qa-db-ja.com

Bootstrap CSSアラートメッセージを動的に作成する

Bootstrap CSSのjQueryプラグインを使用して、アラートメッセージを動的に作成しようとしています。特定のイベント（AJAX success /エラー）。ここに私のコードの動作しないスニペットがあります：

var alertVisible = false;
function fetchData() {
    function onDataReceived(stats) {
        if (alertVisible) {
            $(".alert-message").alert("close");
        }
        alertVisible = false;
        // Do stuff with data...
    }

    function onError() {
        $(".alert-message").alert();
        alertVisible = true;
    }

    $.ajax({
        dataType: 'json',
        success: onDataReceived,
        error: onError,
        cache: false
    });
};

対応するHTMLは次のとおりです。

<div class="row">
  <div class="alert-message error fade in hide span16" data-alert="alert">
    <a class="close" href="#">&times;</a>
    <p>Lost connection to server.</p>
  </div>
</div>

最初の問題は、アラートがデフォルトで表示されることです。 hideクラスを使用してこれを解決できます。ただし、（閉じるボタンをクリックして）アラートを閉じると、新しいアサートの作成は機能しなくなります（DOM要素がなくなったと思います）。どのようにBootstrapアラートを使用しますか？

javascriptjquerycsstwitter-bootstrap
46
tibbe

この回答は、Bootstrap 2。

アラートが閉じられると、DOMから削除されます。

後でアラートを再表示する場合は、必ずnot put data-dismiss="alert"次のように閉じるボタンで：

<div class="alert fade in" id="login-error" style="display:none;">
    <button type="button" class="close">×</button>
    Your error message goes here...
</div>

次に、閉じるボタンをバインドして、アラートが押されたときに単純に非表示にします。

$('.alert .close').on('click', function(e) {
    $(this).parent().hide();
});

ツールチップを再表示するには、単に表示するだけです。

$('#login-error').show();
79
Sanjay

アラートのDOM要素を動的に追加できます。

Javascript：

function addAlert(message) {
    $('#alerts').append(
        '<div class="alert">' +
            '<button type="button" class="close" data-dismiss="alert">' +
            '&times;</button>' + message + '</div>');
}

function onError() {
    addAlert('Lost connection to server.');
}

HTML：

<div id="alerts"></div>

複数のアラートがある場合、このバージョンでは複数のアラートが蓄積され、エンドユーザーが個別に削除する必要があります。予想されるアラートの数と、ユーザーが各アラートを見ることの重要性に応じて、これを変更して古いアラートを削除することができます。

また、少しのリファクタリングで、このエラーアラートに加えて、警告、情報、成功アラートを作成するためにこれを拡張できます。

19
Eamonn O'Brien-Strain

私が知っている最良の方法：

HTML：

<div class="alert alert-block alert-error fade in" id="cert-error" style="display:none;">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <h4 class="alert-heading">Этот файл не подходит!</h4>
    <p>Недопустимый тип файла! Выберите файл вида: *.cer, *.crt</p>
    <p>
        <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
    </p>
</div>

JS：

$('.alert .close').live("click", function(e) {
    $(this).parent().hide();
});

function showAlert() {
    $(".alert").addClass("in");
    $("#cert-error").show();
}

function closeAlert() {    
    $("#cert-error").hide();
}

ShowAlert（）を使用して通知を表示し、closeAlert（）で通知を非表示にできるようになりました。

5
Игорь К.

Eamonnの答えを取り、それを少し改良して、オプションのtypeとcloseDelayを追加しました。これにより、たとえば、タイプdangerのアラートを追加できます。 5秒後に自動的に次のようになります。

showAlert("Warning message", "danger", 5000);

これを実現するには、次のJavaScript関数を追加します。

function showAlert(message, type, closeDelay) {

    var $cont = $("#alerts-container");

    if ($cont.length == 0) {
        // alerts-container does not exist, create it
        $cont = $('<div id="alerts-container">')
            .css({
                 position: "fixed"
                ,width: "50%"
                ,left: "25%"
                ,top: "10%"
            })
            .appendTo($("body"));
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $('<div>')
        .addClass("fade in show alert alert-" + type)
        .append(
            $('<button type="button" class="close" data-dismiss="alert">')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $cont.prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}
4
isapir

あなたは正しいと思います。アラートの「閉じる」イベントでは、クリックしたDom要素全体が破壊されます。そのため、そのIDの可視性プロパティを確認できません。

したがって、私の提案は、「bootstrap-alerts.jsの「close」クラスまたはcloseイベントを使用しないことです。ルック用のクラスを取得し、従来の非表示またはjqueryトリックを使用してタスクを動作させてみてください。

1
Anuja Patil

RemoveElement（）関数を変更します。 bootstrap-alert.jsの59行目：

変化する：

.remove()

に：

.hide().css('opacity', 1);
1
Joao Leme

Toastrライブラリの実装を検討することができます（ https://github.com/CodeSeven/toastr by John Papa）。 Toastrは、ネイティブDOMイベントトリガーで必要なアラート機能を提供するか、PageLoadで通知を表示できます。調査する価値があります。

1
Steven Woolston