iOS Inspired Dialog Plugin With jQuery - uiAlertView

uiAlertView is an elegant jQuery dialog plugin that let's you create iOS style alerts, confirm/prompt popup boxes, and actions sheets on your web app.

How to use it:

1. Import the latest version of jQuery library and the uiAlertView plugin's files into the html file.

<link rel="stylesheet" href="css/uiAlertView.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" 
        crossorigin="anonymous"></script>
<script src="js/jquery.uiAlertView.js"></script>

2. Create a basic alert on the screen.

$.alertView("Alert message here");

3. Create a confirm dialog with custom buttons and action functions.

$.alertView({
  title: "Are Your Sure?",
  msg: "This is a confirm dialog",
  buttons: [
    { title:"Delete",color:"red",click:function(){alert("Clicked")} },
    { title:"Cancel",click:function(){alert("Clicked")} }
  ]
});

4. Create prompt dialogs with custom input fields.

$.alertView({
  title: "Normal Input",
  msg: "This is a prompt dialog",
  input:{ type:"text", value:"JQuery" },
  buttons: [
    { title:"OK",click:function(text){alert("You Typed:" + text)} },
    { title:"Cancel" }
  ]
});

$.alertView({
  title: "Password Input",
  msg: "This is a prompt dialog",
  input:{ type:"password", placeholder:"Password here" },
  buttons: [
    { title:"OK",click:function(text){alert("You Typed:" + text)} },
    { title:"Cancel" }
  ]
});

5. If you want to disable the background overlay.

$.alertView({
  title: "Are Your Sure?",
  msg: "This is a confirm dialog",
  buttons: [
    { title:"Delete",color:"red",click:function(){alert("Clicked")} },
    { title:"Cancel",click:function(){alert("Clicked")} }
  ],
  showMask: false
});

---

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