logo标签列表

Pnotify - JavaScript可以工作，CSS无法正常工作。

javascripthtmlcssjavascript-frameworkpnotify
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却完全没有效果。有人可以帮忙吗？

你可以链接到一个示例页面吗？ - Subtlebot
这是框架示例页面，如果这就是你的意思：http://pinesframework.org/pnotify/，否则我的测试仅在本地主机上，我可以在需要时上传它。 - Mythago
我也遇到了类似的问题，我无法更改pnotify的宽度。有什么解决办法吗？ - Faizan
2个回答
1

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

 delay: 20000,
 history: false,
 stack: false,
 styling: 'jqueryui'
0
1
我认为.btn和.source是不同的类，但你可能是正确的。由于我们无法看到他的CSS代码，很难确定问题出在哪里。 - Subtlebot
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接