3

我发现这个很酷的小东西叫做 pnotify，它通过 javascript 和 bootstrap 或 jquery css 提供了非常好的通知警报，但特别是 css 不适合我。

我有这个代码：

<head>

    <title>pNotify test</title>

<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<!-- jQuery UI -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" media="all" rel="stylesheet" type="text/css" />
<!-- Bootstrap -->
<link href="includes/bootstrap/css/bootstrap.css" id="bootstrap-css" rel="stylesheet" type="text/css" />
<link href="includes/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="includes/bootstrap/js/bootstrap.min.js"></script>
<!-- Pnotify -->
<script type="text/javascript" src="jquery.pnotify.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.pnotify.default.css">


function show_stack_info() {
var modal_overlay;
if (typeof info_box != "undefined") {
    info_box.pnotify_display();
    return;
}
info_box = $.pnotify({
    title: "Pines Notify Stacks",
    text: "Stacks are used to position notices and determine where new notices will go when they're created. Each notice that's placed into a stack will be positioned related to the other notices in that stack. There is no limit to the number of stacks, and no limit to the number of notices in each stack.",
    type: "info",
    icon: "picon picon-object-order-raise",
    delay: 20000,
    history: false,
    stack: false,
    before_open: function(pnotify) {
        // Position this notice in the center of the screen.
        pnotify.css({
            "top": ($(window).height() / 2) - (pnotify.height() / 2),
            "left": ($(window).width() / 2) - (pnotify.width() / 2)
        });
        // Make a modal screen overlay.
        if (modal_overlay) modal_overlay.fadeIn("fast");
        else modal_overlay = $("<div />", {
            "class": "ui-widget-overlay",
            "css": {
                "display": "none",
                "position": "fixed",
                "top": "0",
                "bottom": "0",
                "right": "0",
                "left": "0"
            }
        }).appendTo("body").fadeIn("fast");
    },
    before_close: function() {
        modal_overlay.fadeOut("fast");
    }
});


</head>

<body>

<button class="btn source" onclick="$.pnotify({
                    title: 'Oh No!',
                    text: 'Something terrible happened.',
                    type: 'error'
                });">Regular Error</button> 

<button class="btn source" style="margin-left: 10px;" onclick="show_stack_info();">What are stacks?</button>                

</body>

我真的不知道为什么 javascript 可以工作，但根本没有 css 工作。有人可以帮忙吗？

4

2 回答 2

1

您需要设置样式。如果您使用的是 jquery，请执行以下操作：

 delay: 20000,
 history: false,
 stack: false,
 styling: 'jqueryui'
于 2013-10-09T18:14:46.030 回答
0

您不能在班级名称中使用空格（如果它是单个班级）。尝试重命名btn source为btn_source. 请参阅CSS 类名/选择器中哪些字符有效？

但是，正如 Nimoi 在评论中指出的那样，如果是两个类就可以了。请参阅如何将多个类分配给 HTML 容器？.

于 2013-08-14T14:43:29.000 回答