文章/答案/技术大牛

发布

社区首页 >问答首页 >Pnotify - javascript正在工作，css不起作用

问Pnotify - javascript正在工作，css不起作用
EN

Stack Overflow用户

提问于 2013-08-13 23:55:31

回答 2查看 8.1K关注 0票数 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根本不能工作。有人能帮帮忙吗？

css

javascript-framework

pnotify

javascript

html

回答 2

Stack Overflow用户

发布于 2013-10-10 02:14:46

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

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

票数 1

Stack Overflow用户

发布于 2013-08-14 22:43:29

您不能在类的名称中使用空格(如果它是单个类)。尝试将btn source重命名为btn_source。请参阅Which characters are valid in CSS class names/selectors?

然而，正如Nimoi在评论中指出的那样，如果它是两个类就可以了。参见How to assign multiple classes to an HTML container?。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18213776

复制

相似问题

问Pnotify - javascript正在工作，css不起作用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Pnotify - javascript正在工作，css不起作用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Pnotify - javascript正在工作，css不起作用
EN