Bootstrap Modal Builder

How To Use

1. Load jQuery, Twitter Bootstrap and include Bootstrap Modal Builder file

To use Bootstrap Modal Builder, you’ll need to make sure you include jQuery 1.7+, Twitter Bootstrap 3.0+ and this Bootstrap Modal Builder script is included in your document.

<!--  jQuery 1.7+  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--  Twitter Bootstrap 3.0+  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--  Bootstrap Modal Builder  -->
<script src="path/to/bootstrap-modal-builder.min.js"></script>

2. Start Building Your Modal Dynamically

The script has two methods to help you build dynamic Bootstrap modals. One modal that constructs the modal and the other to help you construct form elements into a modal with a form.

<script type="text/javascript">
$(function(){
	// triggers dynamic modal on button with class hello-modal
	$('.hello-modal').on('click', function(ev) {
		ev.preventDefault();
		// we need obj.modalTitle and an obj.modalContent [an array] to build this properly
		var modalObj = {},
		modalObj.modalTitle='Hello Modal',
		$modalBody=$('<div></div>').addClass('modal-body'),
		$modalFooter=$('<div></div>').addClass('modal-footer').html('<button type="button" class="btn btn-link" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>');
		// add some content to $modalBody;
		$modalBody.html('<h6>Hello World</h6><p>"One day you will wake up and there won''t be any more time to do the things you''ve always wanted. Do it now.” -Paulo Coelho<p>');
		// finish modalObj
		modalObj.modalContent=[$modalBody,$modalFooter];
		ALBA.ModalBuilder.buildModal(modalObj);
	}
});
</script>

The method accepts an object with the following keys.

Key [required]	Type	Default Value	Description
modalObj	`object`	`{}`	Object that contains modalTitle(string) and modalContent(array)
modalObj.modalTitle	`string`	`''`	Modal title as a string.
modalObj.modalContent	`array`	`[]`	Array of DOM elements that we want to insert into modal.

The method accepts an object with the following keys.

Key [required]	Type	Default Value	Description
obj	`object`	`{}`	This is the form element object that contains all of the keys below.
obj.inputType	`string`	`'text'`	Type of input for form. Only supports `['text','checkbox','radio','hidden','textarea','select']` at this time.
obj.elAttr	`object`	`{}`	Form input attributes as an object full of key value pairs. `{id:'firstName',name:'firstName'}`
obj.elClass	`string`	`''`	Class to be applied to form input element.
obj.defaultVal	`string`	`''`	Default value for form input element.
obj.label	`object`	`{}`	Label object contains the following keys `['id','class','html']`.
obj.label.id	`string`	`''`	Label object contains the following keys `['id','class','html']`.
obj.label.class	`string`	`'control-label'`	Class that should be applied to label if inputType is not 'checkbox','radio', or 'hidden'.
obj.label.html	`string`	`''`	Label content is generally just text, but you can use HTML within label to markup further.
obj.hasFeedback	`boolean`	`false`	Will bind 'has-feedback' class to `<div class="form-group"></div>` container.
obj.optionArgs	`array`	`[]`	Select options as a straight array or as an array of objects. If array of objects, the object key is the option value and the object value is the text.
obj.optionDefault	`string`	`''`	Default select option.
obj.inputGroup	`object`	{}	Allows for prepending/appending elements to form input element. Add html as a string to obj.inputGroup.prepend or obj.inputGroup.append to prepend or append the html to the form input element.
obj.isChecked	`boolean`	`false`	If inputType is 'checkbox' or 'radio', this boolean controls if the element is selected on initial build.
obj.hideFormGroup	`boolean`	`false`	This boolean when set to true, is used to hide the formGroup on initial build.
obj.onEvent	`object`	`{}`	Binds an event to input element. Requires event(s) `obj.onEvent.events` as a string and the function name `obj.onEvent.eventhandler`. See more information below
obj.onEvent.events	`string`		Required only if obj.onEvent is passed in. Event or comma separated list of events ['click','change','blur',etc] you wish to bind.
obj.onEvent.eventhandler	`string`		Required only if obj.onEvent is passed in. Function name that will be bound to the event. The function must be accessible.

Examples

Basic Example

This example is straight forward implementation without any form elements.

Open Basic Modal

$('.basic-modal').on('click', function(ev) {
	ev.preventDefault();
	// we need obj.modalTitle and an obj.modalContent [an array] to build this properly
	var modalObj = {},
		$modalBody=$('<div></div>').addClass('modal-body'),
		$modalFooter=$('<div></div>').addClass('modal-footer').html('<button type="button" class="btn btn-link" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>');
	modalObj.modalTitle='Hello Modal';
	// add some content to $modalBody;
	$modalBody.html('<h6>Hello World</h6><p>"One day you will wake up and there won\'t be any more time to do the things you\'ve always wanted. Do it now.” -Paulo Coelho<p>');
	// finish modalObj
	modalObj.modalContent=[$modalBody,$modalFooter];
	ALBA.ModalBuilder.buildModal(modalObj);
});

Form Example

This example includes form elements.

Open Form Modal

$('.form-modal').on('click', function(ev) {
	ev.preventDefault();
	// we need obj.modalTitle and an obj.modalContent [an array] to build this properly
	var modalObj={},
		$modalBody=$('<div></div>').addClass('modal-body clearfix'),
		$modalForm=$('<form></form>').attr({method:'post',action:'/sendEmail',id:'contactForm',role:'form',autofocus:'full-name'}),
		$modalFooter=$('<div></div>').addClass('modal-footer').html(
			'<input type="hidden" name="subject" value="My Form Submission"/>' +
			'<button type="button" class="btn btn-link" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>'
		),
		$modalSubmit=$('<button></button>').attr({type:'submit',form:'contactForm'}).addClass('btn btn-primary').on('click', function(ev) {
			ev.preventDefault();
			$modalForm.submit();
			return false;
		}).html('<i class="glyphicon glyphicon-send"></i> Send');
	modalObj.modalTitle='My Form';
	$modalFooter.prepend($modalSubmit);
	$modalBody.append(ALBA.ModalBuilder.buildModalFormElements({elAttr:{id:'full-name',name:'full-name',required:true,placeholder:'Your Full Name'},label:{id:'full-name',html:'Full Name:'}}));
	$modalBody.append(ALBA.ModalBuilder.buildModalFormElements({inputType:'email',elAttr:{id:'from-email',name:'from-email',required:true,placeholder:'Your Valid Email'},label:{id:'from-email',html:'Email Address:'}}));
	$modalBody.append(ALBA.ModalBuilder.buildModalFormElements({inputType:'textarea',elAttr:{id:'message-text',name:'message-text',required:false,placeholder:'Your Message'},label:{id:'message-text',html:'Message:'}}));
	$modalForm.append($modalBody).append($modalFooter);
	modalObj.modalContent=[$modalForm];
	ALBA.ModalBuilder.buildModal(modalObj);
});

Another Form Example

This example includes form elements with onEvent.