Mobile-first Dialog Popup JavaScript Library – mcx-dialog-mobile

mcx-dialog-mobile is a pure JavaScript plugin to create mobile-first, iOS-inspired dialog popups (alert/confirm dialog, action sheet, loading spinner, toast notification) on your web app.

More previews:

How to use it:

Import the ‘dialog-mobile.css’ and ‘mcx-dialog.js’ into your document.

<link rel="stylesheet" href="dist/css/dialog-mobile.css">
<script src="dist/mcx-dialog.js"></script>

Create an alert dialog.

mcxDialog.alert("Alert Message");

Create a confirmation dialog.

mcxDialog.confirm("Are you sure?", {
  sureBtnClick: function(){
    // callback
  }
});

Create a toast notification that auto dismisses after 2 seconds.

mcxDialog.toast("Toast message", 2);

Create a loading spinner.

mcxDialog.loading({
  src: "dist/img",
  hint: "Loading..."
});

Create a custom action sheet.

mcxDialog.showBottom({
  btn: ["Item 1", "Item 2"], 
  btnColor: ["#000000", "#000000"],
  btnClick: function(index){
    alert("You Just Clicked" + btn[index - 1]);
  }
});