JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/4804759/jsfiddle/%5B2014-07-22%5D%20pnotify-jquerymobile/jquery.mobile.icons.min.css">
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/4804759/jsfiddle/%5B2014-07-22%5D%20pnotify-jquerymobile/pnotify.custom.min.css">
<script src="https://dl.dropboxusercontent.com/u/4804759/jsfiddle/%5B2014-07-22%5D%20pnotify-jquerymobile/pnotify.custom.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/4804759/jsfiddle/%5B2014-07-22%5D%20pnotify-jquerymobile/my-custom-theme.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
CSS
/* info */
.ui-pnotify-container{
color: #31708f !important;
background-color: #d9edf7 !important;
border-color: #bce8f1;
background: none;
}
/* error */
.ui-pnotify-container.ui-state-error {
color: #a94442 !important;
background-color: #f2dede !important;
border-color: #ebccd1;
background: none;
}
/* success */
.ui-state-default {
color: #3c763d !important;
background-color: #dff0d8 !important;
border-color: #d6e9c6;
background: none;
}
/* warning */
.ui-pnotify-container.ui-state-highlight {
color: #8a6d3b !important;
background-color: #fcf8e3 !important;
border-color: #faebcc;
background: none;
}
.ui-pnotify-container .ui-icon {
background: none;
}
.ui-icon-close{
position: relative;
text-indent: 0px;
width: 24px;
height: 24px;
margin-right: 20px;
}
.ui-icon-close:before {
content: "\f00d";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
position: absolute;
}
JavaScript
new PNotify({
title: "asdasd",
text: "asdasdsa",
type: "info",
icon: "fa fa-gears",
delay: 999999,
styling: "jqueryui",
addclass: 'custom-notif',
mouse_reset: false,
buttons: {
sticker: false,
closer_hover: false,
}
});
new PNotify({
title: "asdasd",
text: "asdasdsa",
type: "success",
icon: "fa fa-gears",
delay: 999999,
styling: "jqueryui",
addclass: 'custom-notif',
mouse_reset: false,
buttons: {
sticker: false,
closer_hover: false,
}
});
new PNotify({
title: "asdasd",
text: "asdasdsa",
type: "warning",
icon: "fa fa-gears",
delay: 999999,
styling: "jqueryui",
addclass: 'custom-notif',
mouse_reset: false,
buttons: {
sticker: false,
closer_hover: false,
}
});
new PNotify({
title: "asdasd",
text: "asdasdsa",
type: "error",
icon: "fa fa-gears",
delay: 999999,
styling: "jqueryui",
addclass: 'custom-notif',
mouse_reset: false,
buttons: {
sticker: false,
closer_hover: false,
}
});