jQuery Plugin For Lightbox Style Confirm Interface - confirmOn

confirmOn is an useful jQuery plugin for creating a modal box style confirmation popup when performing important actions on your web page.

How to use it:

1. Include jQuery javascript library and jQuery confirmOn plugin on your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.confirmon.js"></script>

2. The sample CSS for the confirmation popup

.confirmon-overlay {
background-color: black;
background-color: rgba(0, 0, 0, 0.60);
width: 100%;
height: 100%;
margin: 0;
top: 0;
left: 0;
position: fixed;
z-index: 150;
display: none;
}
.confirmon-box {
background-color: #0099cc;
color: #ddd;
border: solid 1px #666666;
box-shadow: 0px 1px 10px #222;
padding: 20px 10px 35px 10px;
text-align: center;
font-weight: bold;
font-size: 15px;
z-index: 151;
display: none;
position: absolute;
margin-left: -15%;
width: 30%;
left: 50%;
top: 185px;
}
.confirmon-box button {
margin: 10px 5px;
padding: 5px 10px;
text-align: center;
background-color: #0099cc;
border: 1px solid #ddd;
color: #ddd;
font-weight: bold;
}
.confirmon-box button:hover {
background-color: #00bbee;
cursor: pointer;
}

3. Create a 'delete me' button. If you click no in the confirmation popup, nothing happens. If you click yes, the provided handler in .confirmOn() is called.

<button id="demo">Delete me</button>

4. The javascript.

<script>
$(function() {
$('#demo').confirmOn('click', function() {
$(this).remove();
});
});
</script>

5. Options and defaults.

// The confirmation question
questionText: 'Are you sure?',

// // Use another prefix for the classes used by the plugin
classPrepend: 'confirmon',

// Text on the button the user clicks when the handler should be called
textYes: 'Yes',

// Text on the button the user clicks when the handler should not be called
textNo: 'No',

// Cancel the pop-up by letting this funcion return false
onShow: null

Change logs:

v0.1.4 (2014-03-08)

• Added option 'onShow', depending on the return value of the passed function it cancels the pop-up

v0.1.3 (2014-01-04)

• Changed sample and version++
• Create .min.js

v0.1.2 (2013-11-20)

• ClassPrepend option is now also used for the inner elements of the pop-up

---

This awesome jQuery plugin is developed by invetek. For more Advanced Usages, please check the demo page or visit the official website.