通过不在页面中放置任何div来在引导程序中编写动态警报

时间:2014-08-21 15:21:03

标签: twitter-bootstrap

我可以在bootstrap中编写动态警报

以下是我试过的示例代码

<head>
    <script src="jquery-1.9.1.js"></script>
    <script src="bootstrap-current/bootstrap.js"></script>
    <script>
        $("<div/>").addClass("alert alert-error").html("test").alert();
    </script>
</head>

2 个答案:

答案 0 :(得分:0)

是的,您可以动态创建警报。您需要在代码中更改一些内容。

$("<div/>").addClass("alert alert-danger").html("test").appendTo("yourSelector");

查看this JS Fiddle

这是非常基本的jQuery。您可能希望在线查找一些教程。

答案 1 :(得分:0)

试试这个:

LIVE_DEMO

您可以在此使用三个不同的style class,例如alert alert-successalert alert-dangeralert alert-warning

 $(document).ready(function () {
            ShowMessagesUsingPopup("alert", "alert alert-success");
        });



        function ShowMessagesUsingPopup(message, styleName) {

            var div = document.createElement("div");
            div.id = "DivMessage";
            div.style.bottom = "10px";
            div.style.right = "25px";
            div.style.width = "400px";
            div.style.position = "fixed";
            div.style.zIndex = "1060";

            var spanTag = document.createElement('span');
            if (styleName == "alert alert-success") {
                spanTag.className = "glyphicon glyphicon-ok";
            }
            else if (styleName == "alert alert-danger") {
                spanTag.className = "glyphicon glyphicon-ban-circle";
            }
            else if (styleName == "alert alert-warning") {
                spanTag.className = "glyphicon glyphicon-warning-sign";
            }
            div.appendChild(spanTag);

            var buttonTag = document.createElement('button');
            buttonTag.type = "button";
            buttonTag.className = "close";
            buttonTag.textContent = "x";
            buttonTag.setAttribute("data-dismiss", "alert");
            div.appendChild(buttonTag);

            var strongTag = document.createElement('strong');
            strongTag.textContent = " " + message;
            div.appendChild(strongTag);

            div.style.display = "block";
            div.className = styleName + " alert-dismissable";
            $(".alert").alert();
            document.body.appendChild(div);

        }