Pnotify-javascript正在工作，css没有

Pnotify - javascript is working, css not

本文关键字：css 没有 工作 Pnotify-javascript      更新时间：2023-09-26

我发现了一个很酷的小东西，叫做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根本不能工作。有人能帮忙吗？

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

 delay: 20000,
 history: false,
 stack: false,
 styling: 'jqueryui'

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

然而，正如Nimoi在评论中指出的那样，如果是两个类也没关系。请参阅如何将多个类分配给一个HTML容器？。

相关文章：