Today I am going to share awesome jQuery Plugin to replace Javascript’s window.alert(), window.confirm() and window.prompt() functions. This popup plugin enables you to create alert / confirm / prompt dialog boxes with custom styles & animations.
Features
- Substitutes Javascript’s window.alert(), window.confirm() and window.prompt() functions
- Implements jQuery Promise interface
- Customizable buttons and inputs
- Flexible message-queue
- Fully CSS customizable
Libraries
Include jQuery library with plugins JS+CSS library.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/messagebox.min.css"> <script src="https://code.jquery.com/jquery-1.11.2.min.js">script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/messagebox.min.js">script> |
HTML
Created sample button for all types of popup buttons.
<button class="btn btn-danger demo-1">Alert Box> <button class="btn btn-primary demo-2">Confirm Box> <button class="btn btn-warning demo-3">Prompt Box> <button class="btn btn-info demo-4">Custom Dialog> |
JS
Here is the list of sample function which can use to display different different types of popup.
<script> $(document).ready(function(){ $.MessageBox("A plain MessageBox can replace Javascript's window.alert(), and it looks definitely better..."); $( ".demo-1" ).click(function() { $.MessageBox("Replace the Javascript's window.alert() functions"); }); $( ".demo-2" ).click(function() { $.MessageBox({ buttonDone : "Yes", buttonFail : "No", message : "Are You Sure?" }).done(function(){ $.MessageBox("You clicked Yes"); }).fail(function(){ $.MessageBox("You clicked No"); }); }); $( ".demo-3" ).click(function() { $.MessageBox({ input : true, message : "What's your name?" }).done(function(data){ if ($.trim(data)) { $.MessageBox("Hi "+data+"!"); } else { $.MessageBox("You are shy, aren't you?"); } }); }); $( ".demo-4" ).click(function() { $.MessageBox({ buttonDone : "OK", buttonFail : "Cancel", message : "You can type whatever you like", input : true, speed : 1000 }).done(function(){ $.MessageBox("Well done!"); }).fail(function(){ $.MessageBox("You rebel!"); }); }); }); script> |
See live demo and download source code.
This awesome plugin is developed by gasparesganga. Visit their official github repository for more information and follow for future updates.
