转载

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 /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>

via Bower: Simply copy these links

$ bower install craftpip/jquery-confirm

via Npm:

$ npm install jquery-confirm

Dependencies:

Bootstrap by Twitter >= v3 (optional, if you want to use responsive layouts)
jQuery library > v1.8

to use jconfirm without bootstrap set useBootstrap: false

Quick 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

正文到此结束

所属分类：前端

本文标签： confirm alert dialog jquery-confirm
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Welcome to jquery-confirm!

Getting started

Installation

Quick Usage

`$.alert`

`$.confirm`

Showing prompt using confirm

`$.dialog`

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

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流

Welcome to jquery-confirm!

Getting started

Installation

Quick Usage

$.alert

$.confirm

Showing prompt using confirm

$.dialog

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

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流

`$.alert`

`$.confirm`

`$.dialog`

NOTE : The `$.confirm()`, `$.dialog()` & `$.alert()` methods are alias of `jconfirm()`. All three methods indirectly call the jconfirm base function altering the provided options.