Welcome to jquery-confirm!
Getting started
Notes on migrating from v2 to v3.
https://github.com/craftpip/jquery-confirm/wiki/Migrate-from-v2-to-v3
Installation
Download
Download the Latest version and use files in the
adds one button (okay) if no buttons are specified, this lets the user to close the modal.
if no buttons are specified, two buttons (Okay & cancel) will be added.
removes buttons and explicitly shows the closeIcon (×)
NOTE : The
/dist/ folder.
via CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>$ bower install craftpip/jquery-confirm$ npm install jquery-confirm- Bootstrap by Twitter >= v3 (optional, if you want to use responsive layouts)
- jQuery library > v1.8
to use jconfirm without bootstrap set
useBootstrap: falseQuick Usage
$.alert
adds one button (okay) if no buttons are specified, this lets the user to close the modal.
.alert({
title: 'Alert!',
content: 'Simple alert!',
});
$.confirm
if no buttons are specified, two buttons (Okay & cancel) will be added.
$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
$.alert('Canceled!');
},
somethingElse: {
text: 'Something else',
btnClass: 'btn-blue',
keys: ['enter', 'shift'],
action: function(){
$.alert('Something else?');
}
}
}
});
Showing prompt using confirm
Simply add form to the content and bind the events you want. This form can also be loaded via ajax.$.confirm({
title: 'Prompt!',
content: '' +
'<form action="" class="formName">' +
'<div class="form-group">' +
'<label>Enter something here</label>' +
'<input type="text" placeholder="Your name" class="name form-control" required />' +
'</div>' +
'</form>',
buttons: {
formSubmit: {
text: 'Submit',
btnClass: 'btn-blue',
action: function () {
var name = this.$content.find('.name').val();
if(!name){
$.alert('provide a valid name');
return false;
}
$.alert('Your name is ' + name);
}
},
cancel: function () {
//close
},
},
onContentReady: function () {
// bind to events
var jc = this;
this.$content.find('form').on('submit', function (e) {
// if the user submits the form by pressing enter in the field.
e.preventDefault();
jc.$$formSubmit.trigger('click'); // reference the button and click it
});
}
});
$.dialog
removes buttons and explicitly shows the closeIcon (×)
$.dialog({
title: 'Text content!',
content: 'Simple modal!',
});
NOTE : The $.confirm(), $.dialog() & $.alert() methods are alias of jconfirm().
All three methods indirectly call the jconfirm base function altering the provided options.
https://craftpip.github.io/jquery-confirm/#lazy-open
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
