Beautiful Alert or Popup script
index.html file
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel= "stylesheet" href = "notice.css">
<script src = "jquery.notice.js"></script>
<script>
function hello()
{
$.notice({
text:'Hell this is alert' ,
type:'info'
})
}
</script>
<input type = "button" onclick = "hello()" value = "Show"> <!-- //Button for apply the action on script-->
notice.css file
notice-wrap {
display: block;
position: fixed;
right: 0;
top: 0;
width: 100%;
max-width: 380px;
font-family: 'Roboto', sans-serif;
padding: 15px 15px 0 15px;
box-sizing: border-box;
overflow: auto;
}
notice-wrap[position='top-left'] {
right: auto;
left: 0
}
notice-wrap[position='bottom-left'] {
right: auto;
left: 0;
top: auto;
bottom: 0;
}
notice-wrap[position='bottom-right'] {
right: 0;
left: auto;
top: auto;
bottom: 0;
}
notice {
display: block;
position: relative;
font-size: 15px;
font-weight: normal;
background-color:red;
border: 1px solid #CCC;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 20px;
padding: 15px;
box-shadow: 0px 0px 5px 3px #fff;
}
notice:before,
notice:after {
position: absolute;
content: "";
background-color: red;
transform: rotate(45deg);
}
notice:before,
notice:after {
box-sizing: border-box;
}
notice:before {
width: 16px;
height: 2px;
right: 14px;
top: calc(50% - 1px);
}
notice:after {
width: 2px;
height: 16px;
right: 21px;
top: calc(50% - 8px);
}
notice-close {
position: absolute;
display: block;
right: 12px;
width: 20px;
height: 20px;
cursor: pointer;
top: calc(50% - 10px);
z-index: 1;
}
notice[close-on-click='true'] {
cursor: pointer;
}
notice[type='success'] {
color: #ffffff;
background-color: #3F51B5;
border-color: #04be5b;
}
notice[type='success']:before,
notice[type='success']:after {
background-color: #e5e5e5;
}
notice[type='error'] {
color: #ffffff;
background-color: rgb(245, 20, 4);
border-color: #ffffff;
}
notice[type='error']:before,
notice[type='error']:after {
background-color: #ffffff;
/* font-weight: bolder; */
}
notice[type='warning'] {
color: #ffffff;
background-color: #F44336;
border-color: #ff9948;
}
notice[type='warning']:before,
notice[type='warning']:after {
background-color: #ffffff;
}
notice[type='info'] {
color: #ffffff;
background-color: blue;
border-color: #0082d5;
}
notice[type='info']:before,
notice[type='info']:after {
background-color: red;
}
jquery.notice.js
;(function($) {
$.fn.notice = $.notice = function(arr) {
var opt = $.extend({
text: "",
type: "info",
canAutoHide: true,
holdup: "2500",
fadeTime: "2500",
canFadeHover: true,
hasCloseBtn: true,
canCloseClick: false,
position: 'top-right',
zIndex: '9999',
custom: '',
icon: ''
}, arr),
el = {
chkPosition: (opt.position == 'bottom-right') ? 'bottom-right' : ((opt.position == 'bottom-left') ? 'bottom-left' : (opt.position == 'top-left') ? 'top-left' : 'top-right'),
closeOption: (opt.hasCloseBtn) ? '<notice-close></notice-close>' : '<style>#nt' + timeStamp + ':before,#nt' + timeStamp + ':after{display:none}</style>',
chkIcon: (opt.text.indexOf(" ")) ? 'white-space: pre-wrap; word-wrap: break-word;' : '',
chkMsg: (opt.text.indexOf(" ")) ? 'white-space: pre-wrap; word-wrap: break-word;' : ''
}, timeStamp = $.now();
if ($('notice-wrap').length == 0)
$('body').append('<notice-wrap position="top-left" style="z-index:' + opt.zIndex + '"><notice-begin></notice-begin></notice-wrap><notice-wrap position="top-right" style="z-index:' + opt.zIndex + '"><notice-begin></notice-begin></notice-wrap><notice-wrap position="bottom-right" style="z-index:' + opt.zIndex + '"><notice-begin></notice-begin></notice-wrap><notice-wrap position="bottom-left" style="z-index:' + opt.zIndex + '"><notice-begin></notice-begin></notice-wrap>');
var notice = $('<notice class="' + opt.custom + '" close-on-click=' + opt.canCloseClick + ' fade-on-hover=' + opt.fadeOnHover + ' type="' + opt.type + '" style="' + el.chkMsg + '"><i class="material-icons">' + opt.icon + '</i><span>' + opt.text + '</span>' + el.closeOption + '</notice>')
.insertAfter('notice-wrap[position="' + el.chkPosition + '"] > notice-begin');
if (opt.canAutoHide)
setTimeout(function() {
notice.fadeOut(opt.fadeTime, function() {
$(this).remove();
});
}, opt.holdup);
$('notice[close-on-click="true"]').click(function() {
$(this).fadeOut(opt.fadeTime, function() {
$(this).remove();
});
});
$('notice > notice-close').click(function() {
$(this).parent()
.fadeOut(opt.fadeTime, function() {
$(this).remove();
});
});
return this;
};
}(jQuery));
