Bootstrap3 dialog more powerful and flexible modal boxes, bootstrap3dialog

Bootstrap3 dialog more powerful and flexible modal boxes, bootstrap3dialog

All those who have used the bootstrap framework know that the modal boxes provided by bootstrap are very inflexible and can be described as a weakness. But nakupanda's open source author encapsulates a more powerful and flexible modal box-bootstrap3-dialog.

I. Source Code download

Bootstrap3-dialog git

Ii. effect display

1. error warning box

2. confirm confirmation selection box

3. Success prompt box

4. ajax remote page loading dialog box

5. the ajax custom page dialog box is displayed.

Iii. Usage

Bootstrap3-dialog demo has a very detailed introduction, but for beginners is a trouble, but also a method and comment to see. But I have made new encapsulation of these commonly used methods, so it is much easier.
I will not talk about the introduction of js and css files.

① Error warning box

// The error message "Logon" box $. showErr = function (str, func) {// call the show method BootstrapDialog. show ({type: BootstrapDialog. TYPE_DANGER, title: 'error', message: str, size: BootstrapDialog. SIZE_SMALL, // The size is small. The default dialog box is relatively wide. buttons: [{// set the close button label: 'close', action: function (dialogItself) {dialogItself. close () ;}], // bring the callback method onhide: func}) when the dialog box is closed });};

In this way, you can directly use $. showErr ("no daily report on funds") When an error warning box is displayed.

② Confirm confirmation selection box

$. ShowConfirm = function (str, funcok, funcclose) {BootstrapDialog. confirm ({title: 'confirmed', message: str, type: BootstrapDialog. TYPE_WARNING, // <-- Default value is // BootstrapDialog. TYPE_PRIMARY closable: true, // <-- Default value is false. To disable draggable: true, // <-- Default value is false, you can drag btnCancelLabel: 'cancel', // <-- Default value is 'cancel', btnOKLabel: 'OK', // <-- Default value is 'OK', btnOKClass: 'btn-warning ', // <-- If you didn't specify it, dialog type size: BootstrapDialog. SIZE_SMALL, // execution method onhide: funcclose, callback: function (result) {// when you click OK, the result is true if (result) {// execution method funcok. call ();}}});};

Call by using $. showConfirm (title, _ doPost.

③ Success prompt box

$. ShowSuccessTimeout = function (str, func) {BootstrapDialog. show ({type: BootstrapDialog. TYPE_SUCCESS, title: 'success', message: str, size: BootstrapDialog. SIZE_SMALL, buttons: [{label: 'true', action: function (dialogItself) {dialogItself. close () ;}}], // The onshown: function (dialogRef) {setTimeout (function () {dialogRef. close () ;}, YUNM. _ set. timeout) ;}, onhide: func });};

④ Ajax remote page loading pop-up box

First, let's look at how to use it.

<A href = "$ {ctx}/common/showSendMessage" rel = "external nofollow" rel = "external nofollow" target = "dialog"> click to open it </a>

Yes, just this line of code!

1. A tag
2. An href property directs to a remote page
3. Set the target attribute to dialog.

However, we need to encapsulate it.

Step 1: When loading a page, we need to execute the ajaxTodialog Method for tag.

$(function() { // dialogs if ($.fn.ajaxTodialog) {  $("a[target=dialog]").ajaxTodialog(); }});

Step 2: encapsulate the ajaxTodialog method.

$. Fn. extend ({ajaxTodialog: function () {return this. click (function (event) {var $ this = $ (this); YUNM. debug ("ajaxTodialog" + $ this. selector); var title = $ this. attr ("title") | $ this. text (); var url = $ this. attr ("href"); $. ajax ({type: 'post', url: url, cache: false, success: function (response) {ajaxDialog = BootstrapDialog. show ({message: function (dialog) {var $ message = $ ('<div> </div>'); parse message.html (response ); // return the returned page as the message: return $ message;}, title: title,}); event. preventDefault (); return false ;});},});

⑤ Ajax custom page loading pop-up box

⑤ And ④ are similar, but there are some differences. The differences are listed below.

Manipulating = "1" must be added to the usage method to specify as a custom page without using the header and footer of bootstrap dialog.

<A href = "$ {ctx}/common/showSendMessage" rel = "external nofollow" rel = "external nofollow" target = "dialog" manipulating = "1"> Custom page </a>

Added manipulating = 1 in the ajaxTodialog method.

If (manipulating = 1) {ajaxDialog = new BootstrapDialog ({message: function (dialog) {var $ message = $ ('<div> </div> '); export message.html (response); return $ message;}, // find the x number on the custom page to bind the close event onshown: function (dialogRef) {var $ button = dialogRef. getModalContent (). find ('button [data-widget = "remove"] '); $ button. on ('click', {dialogRef: dialogRef}, function (event) {event. data. dialogRef. close () ;};},}); ajaxDialog. realize (); ajaxDialog. getModalHeader (). hide (); // header is not ajaxDialog. getModalFooter (). hide (); // footer does not require ajaxDialog.getModalBody().css ('padding', 0); // ajaxDialog is not filled. open ();}

The above is a more powerful and flexible modal frame of the bootstrap3 dialog introduced by the editor. I hope to help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!