brijeshb42 / medium-style-confirm

medium.com style confirm dialog

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

medium-style-confirm's Issues

mscConfirm Not Preventing Href to confirmation

I am trying to apply mscConfirm on an anchor tag, where upon click I want to confirm user that if he is sure,
Below is the simple code.

<a class="btn btn-success"
     onclick="javascript:return mscConfirm('Are you sure you want to start this application??', function(){return true;
                                })"
                                   href="any-page.html"

                                >Start</a>

What what happens, when i click on the link, confirm boxes apears and automatically redirects to the herf, before even I click Yes or No?

Using this to delete items from storage

Great app.
I tried this to help delete items from local storage but couldn't get a way round it, any help?

<section class="content">
        <div class="demo msc-action">
            <button style="background-color: #D9383B;" id="demo2" onclick="DeleteItem()">Remove Item</button>
        </div>
</section>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var demobtn1 = document.querySelector("#demo2");
    demobtn1.addEventListener("click", function() {
        mscConfirm("Remove Item", "Are you sure you want to delete this item?", function() {  
        function deleteItem(index) {      
            const cartEntries = JSON.parse(localStorage.getItem("cart"));
            cartEntries.splice(index, 1);
            localStorage.setItem("cart", JSON.stringify(cartEntries));
            window.location.reload()
    });
    });
});

</script>