notimodal
Version:
an easy jquery plugin to make a bootstrap notification modal
68 lines (63 loc) • 2.74 kB
HTML
<html>
<head>
<title>notiModal demo</title>
<link rel="stylesheet" type="text/css" href="demo/css/bootstrap.popover.min.css">
<link rel="stylesheet" type="text/css" href="demo/css/demo.css">
</head>
<body>
<a href="https://github.com/netfox01/notiModal"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
<div class="bg"></div>
<div class="name">
notiModal
</div>
<div class="container">
<button id="force-show" class="btn btn-default">Force "second_modal" show</button>
</div>
<script src="demo/js/jquery.js" type="text/javascript"></script>
<script src="notiModal.js" type="text/javascript" ></script>
<script>
// $.notiModal.config.sound = false;
// $.notiModal.config.auto_hide = true;
// $.notiModal.config.show_duration = 5000;
// create a notiModal
$.notiModal.init("first_modal", {
title: "hello again",
content: "I'm jus trying to make somthing <strong>nice</strong> here. <br /> Do you like it ?",
'ok': 'Yes i like it!',
'close': 'Not that much!',
'max_width': 420,
'no_more': 'Never show that again',
// ok callback
onOkClick: function (noti_modal) {
// hide current notiModal
noti_modal.hide();
alert('glade you like it! plz give this project a star.');
},
onClose: function (noti_modal) {
alert("i'd be happy to hear your feedback!");
}
});
// create another notiModal
$.notiModal.init("second_modal", {
title: "Hi there",
top: 300,
sound: true,
ok: "show another notiModal",
max_width: 800,
content: 'this is a notification modal',
// ok callback
onOkClick: function (noti_modal) {
// hide current notiModal
noti_modal.hide()
// get and show the first created notiModal
$.notiModal.get("first_modal").show();
}
})
.show();
$('#force-show').click(function () {
$.notiModal.get("second_modal").show({force: true});
})
</script>
</body>
</html>