fibe

Fibe Alerts

A simple replacement for standart alert and confirm messages for your web site

---

How to use it?

$ npm install fibe

1. add css file to your html page

<link rel="stylesheet" href="fibe.min.css">

2. add js file to your html page (requires jQuery)

<script src="fibe.min.js"></script>

3. use fibe like usual alert function!

fibe('Look easy, right?');

Examples

Usual alert with subtitle

fibe('Hello!', 'Thanks for watching');

Usual alert with preset style (default, success, warning, error - is available)

fibe('Payment was successful', 'Good day!', 'success');
fibe('Your connection is too slow!', 'warning');

Usual alert with your own style

fibe('Nice color here!', '#1C25DF');

Use true or false if you want to hide decor element. By default it is hidden.

fibe('Puff... its disappeared!', false);

If you wanna to create confirm window - use object and add second button.
By the way: subtitle in object can accept string or object... so, you can put there any html

fibe({
  title: 'My genius title',
  subtitle: 'and some subtitle text here',
  decor: false,
  button1: {
    name: 'Cancel',
  },
  button2: {
    name: 'Do it!',
    color: '#24E11B'
  }
});

and if you need to do anything after you press the button, just add function

fibe({
  title: 'What will happen after you close that window?',
  subtitle: 'you can check!',
  decor: true,
  button1: {
    name: 'Cancel',
    action: function(){
      alert('you press cancel button!')
    },
    color: '#760E0E'
  },
  button2: {
    name: 'Do it!',
    color: '#24E11B',
    action: function(){
      alert('you press action button!')
    }
  }
});

PS: you can place arguments in any sequence - fibe will work anyway. And you can make something like this:

fibe('My lil caption', 'and subtext', {
  title: 'This caption you will see',
  text: 'And this subtext have priority',
  button1: {
    name: 'Got it!'
  },
  style: '#22C388'
}, false, 'error');

But remember that the properties of the object will be in priority.