Lightweight Confirm Dialog Plugin For jQuery - YesNoDialog

Just another jQuery confirm dialog plugin that shows a question dialog box with YES / NO buttons on top of your webpage. After the user clicked a button the callback function will be executed and the response could be true or false.

How to use it:

1. Make sure the jQuery questionDialog.js script is loaded after jQuery JavaScript library.

<script //code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/questionDialog.js"></script>

2. Call the showQuestionDialog() method to show a question dialog.

$.showQuestionDialog('header text', 'message text', options, function(response){
  // Your code here...
  // For example to check if the ok button is pressed you could do
  if (response === 'ok') {
    // Ok button is pressed
  }
});

3. The default dialog styles. You may change the CSS rules in any way you like.

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: black;
  opacity: 0.7;
  z-index: 999;
}

#confirm-dialog {
  position: fixed;
  color: white;
  background-color: rgba(0,0,0,.85);
  z-index: 1000;
  width: 100%;
  top: 50%;
  transform: translate(0%, -50%);
  font-size: 13px;
}

#confirm-dialog .dialog-content {
  padding: 20px;
  padding-left: 10%;
  padding-right: 10%;
  width: 80%;
  float: left;
}

#confirm-dialog button {
  margin-right: 10px;
  float: right;
  padding: 10px;
  border: 0px;
  border-radius: 2px;
}

#confirm-dialog button.alert { background: #EB2E15; }

#confirm-dialog button.save { background: #8AC007; }

4. Available options.

// The var options is a object with data for the buttons in the dialog // If the attribute `overlay` is not present then the user is forced to choose one of the options.  var options = {   overlay: 'Response when overlay was clicked here',   buttons: {     firstButtonText:  firstButtonClass,     secondButtonText: secondButtonClass,     thirdButtonText:  thirdButtonClass   } };  // The next button classes are avalible // alert                color red // save                 color green  // After the user clicked a button the callback function will be executed. // The response of the callback function will be the text of the clicked button.ange logs:

2016-02-07

• Update questionDialog.js

2015-08-14

• Update questionDialog.js

---

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