Easy Customizable jQuery Alert Popup Plugin - jzAlert

jzAlert is a small yet highly customizable jQuery/Zepto popup plugin which lets you create modal-style alert or confirm dialog boxes with minimal effort.

Key features:

• Replaces the default JS alert or confirm popup boxes.
• Lots of customization options and callbacks.
• Click anywhere on the background to close the popup.
• Easy to style.
• Auto dismisses after a specific timeout.

How to use it:

1. Include jQuery library (or Zepto.js) and the jQuery jzAlert plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<!-- <script src="zepto.min.js"></script>-->
<script src="jz.126.alert.min.js"></script>

2. Show a default alert box on the webpage.

$.alert(SETTINGS);

3. All configuration options and callbacks. You can pass the parameters as displayed below as an object to the $.alert function.

$.alert({

  // callback before alert is opened
  showBeforeFn: function() {},

  // backback after alert box is opened
  showAfterFn: function() {},

  // callback before closing the alert box by clicing on the 'close' button
  closeBeforeFn: function(index) {},

  // callback after clicing on the 'close' button
  closeAfterFn: function(index) {}, 

  // click on the background to close
  alertBgClickClose: false,

  // callback before closing the alert box by clicing on the background
  bgCloseBeforeFn: function() {}, 

  // callback after clicing on the background
  bgCloseAfterFn: function() {}, 

  // Custom CSS styles
  css: {
      //$(".site-alert-container").css(containerCss);
      containerCss: {},
      //$(".site-alert-container").find(".site-alert-content").css(contentCss);
      contentCss: {
          // width:"90%"
      },
      //$(".site-alert-container").find(".site-alert-head").css(headCss);
      headCss: {},
      //$(".site-alert-container").find(".site-alert-body").css(bodyCss);
      bodyCss: {},
      //$(".site-alert-container").find(".site-alert-foot").css(footCss);
      footCss: {},
      //$(".site-alert-container").find(".site-alert-headFoot").css(headFootCss);
      headFootCss: {},
      //$(".site-alert-container").find("*").css(allCss);
      allCss: {},
      //$(".site-alert-container").find(".site-alert-contentAll").css(contentAllCss);
      contentAllCss: {},
      // $(".site-alert-container").find(".site-alert-btn").css(btnCss);
      btnCss: {},
  },


  // width
  alertWidth: "60%", \

  // border radius
  alertBorderRadius: "5px", 

  // border color
  alertLineColor: "#ccc", 

  // alert title
  alertTitleStr: "Alert Title", 

  // alert content
  alertBodyStr: "Alert Content",

  // alert buttons
  alertBtns: [{ text: "Confirm", klass: "site-alert-btn-ok" }],

  // top position
  top: false, 

  // top offset
  offsetTop: 0, 

  // animation speed
  delay: "fast", 

  // opacity for overlay
  opacity: "0.75", 

  // show alert header
  alertIsShowHead: false, 

  // show alert footer
  alertIsHideFoot: false, 

  // timeout for auto close
  timeout: false,

});

---

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