Minimalist Flat Confirmation Dialog Plugin With jQuery - confirm.js
File Size: | 3.95 KB |
---|---|
Views Total: | 2973 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
confirm.js is a super tiny jQuery plugin for making a flat style dialog box to confirm some actions with an 'Accept' callback and custom text messages.
How to use it:
1. Load the required style sheet in your document's head
section.
<link rel="stylesheet" href="jquery.confirm.css">
2. Load jQuery library and the jQuery confirm.js script style just before the closing body
tag.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.confirm.js"></script>
3. Display a confirmation dialog on the webpage.
$.confirm({ 'title' : 'Are you sure?', 'acceptTitle' : 'Yes', 'rejectTitle' : 'No', 'acceptAction' : function() {alert('You clicked YES');} });
4. Override or change the CSS as shown below to create your own styles.
.confirmModal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; opacity: .5; } .confirmBox { cursor: default; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .confirmBox .confirmDialog { transform: translate(0, 0); width: 400px; margin: 10% auto; position: relative; } .confirmBox .confirmContent { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); position: relative; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; outline: 0; font-size: 24px; border-radius: .20em; font-family: sans-serif; } .confirmBox .confirmTitle { padding: 35px 30px; color: #000; margin: 0; } .confirmBox .button { box-sizing: border-box; cursor: pointer; display: inline-block; color: #fff; width: 50%; position: relative; padding: 25px; text-align: center; } .confirmBox .accept { background-color: #69FC96; border-radius: 0 0 0 .20em; } .confirmBox .accept:hover { background-color: #87FFAC; } .confirmBox .reject { background-color: #fc7169; border-radius: 0 0 .20em 0; } .confirmBox .reject:hover { background-color: #fc8982; }
This awesome jQuery plugin is developed by seravifer. For more Advanced Usages, please check the demo page or visit the official website.