Boot-wrap

A js class wrapping bootstrap.js for easy ui operation

To install with Bower use bower install boot-wrap

You will need to add jquery, bootstrap, bootbox js and css files to your page as they are dependencies.


Using css classes

Modal

Opens a modal by clicking a link. Add the class bw-modal to a link. Optional attribute data-modal-id can be used to identify the modal.

Modal

Modal with size

Use attribute data-modal-size to set a size to the modal. Valid values are "lg", "sm" and "md". Default is "md".

Same Modal but Larger

Slow loading Modal

The class "loading" will get added to the overlay automatically up on call. Use it for styling. See this page's source for sample styles.

Modal with loading

Ajax Link

Replace text by using ajax-links. Sample usage is like buttons, thumbs up/down buttons. Add class bw-ajaxlink to the link to automate.

Ajaxlink

Ajax Link with confirmation

Ajax-links also support confirmation messages. It will ask the user before proceeding.

Ajaxlink with confirm

Ajax Link with confirmation and callback

Ajaxlink with confirm and callback

Js methods

Show custom model using link

To show your own modal you may use bw.ajaxmodal( element );. The element has to be an anchor tag. If you would like to use any other class than bw-modal to use with the modal you may define your own modal binding as follows.

$(document).on('click', '.my-modal-class', function(e){
  e.preventDefault();
  bw.ajaxmodal($(this));
});

Show custom ajaxlink using link

To show your own ajaxlink you may use bw.ajaxlink( element );. The element has to be an anchor tag. If you would like to use any other class than bw-ajaxlink to use with the link you may define your own ajaxlink binding as follows.

$(document).on('click', '.my-ajaxlink-class', function(e){
  e.preventDefault();
  bw.ajaxlink($(this));
}); 

Closing modals

To close a modal manually use bw.closemodal(element). The element can be any html element inside the modal. It will look for the closest modal and try to close it.

Locking and unlocking forms

To lock an ajax form from being sent multiple times while the request is running use bw.lockform(element) where element is the form element.

To unlock a form use bw.unlockform(element) where element is the form element.

To change the text that appears while the button is in loading state, use attribute data-loading-text

Alerts

To show an alert use the method bw.msg(class, message, duration)

class coulpd be any bootstrap alert class. success, info, warning, danger is supported

message could be any string or html

duration duration to show the alert. false will keep the alert visible forever.