HTML JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

medium-style-confirm

Demo @ bitwiser.in

Usage

  • mscConfirm(title, okCallback) :
mscConfirm("Delete?",function(){
    alert("Post deleted");
});
  • mscConfirm(title, subheading, okCallback) :
mscConfirm("Delete", "Are you sure you want to delete this post?", function(){
    alert("Post deleted");
});
  • mscConfirm(title, subheading, okCallback, cancelCallback) :
mscConfirm("Delete", "Are you sure you want to delete this post?", function(){
  alert("Post deleted");
},
function() {
  alert('Cancelled');
});
  • mscConfirm(object) :
mscConfirm({
    title: 'License',
    subtitle: 'Do you accept the licese agreement?',    // default: ''
    okText: 'I Agree',      // default: OK
    cancelText: 'I Dont',   // default: Cancel
    dismissOverlay: true,   // default: false, closes dialog when clicked on overlay.
    onOk: function() {
        alert('Awesome.');
    },
    onCancel: function() {
        alert('Sad face :( .');
    }
});

New

Prompt -> Equivalent of JS prompt()

The API for mscPrompt and mscConfirm is same. Just the onOk callback of prompt receives a value parameter entered into the prompt.
  • mscPrompt(object) :
mscPrompt({
    title: 'Subscribe',
    subtitle: 'Enter your email to subscribe to the newsletter.',    // default: '',
    defaultValue: 'email',  // default: '', this value will be prefilled in the prompt box  
    okText: 'Subscribe',    // default: OK
    cancelText: 'Cancel',   // default: Cancel
    dismissOverlay: true,   // default: false, closes dialog when clicked on overlay.
    placeholder: 'Enter your email',     // placeholder value to show in input textbox
    onOk: function(value) {
        mscAlert(value+ " has been subscribed to the newsletter.");
    },
    onCancel: function() {
        mscAlert('Sad face :( .');
    }
});

Alert -> Equivalent of JS alert()

  • mscAlert(text) :
mscAlert("Hello World.");
Added support for new lines and carriage return in mscAlert()
  • mscAlert(object) :
mscAlert({
  title: 'Done',

  subtitle: 'You have been registered successfully. \n Your reg. ID is 4321', // default: ''

  okText: 'Close',    // default: OK

});

Installation

  • Install via bower bower install medium-style-confirm or download msc-style.css and msc-script.js.
  • Include msc-style.css in html as <link rel="stylesheet" href="msc-style.css"> just before ending head tag.
  • Include msc-script.js in html as <script src="msc-script.js"> just before ending body tag.
  • Call the mscConfirm() function as shown above.

LICENSE

MIT