javascript: bootstrap, dynamic modal box

Create a dynamic modal box using javascript.

Requirements
You should include bootstrap css and js

This is how you implement and call the instance modalbox.

$(document).ready(function(){
	$('.delete-order').click(function(){
		var oModalBox = new classModalBox('modalBox');
		oModalBox.setAttr({
			header: 'WARNING!',
			body: '      Do you want to delete this voucher?',
			footer:{
				show:true,
				closeButton: {
					onClick:function(){
						$('#modalBox').modal('hide');
					},
					show:true,
					label:'NO'
				},
				okButton:{
					onClick:function(){
						$('#modalBoxz').modal('hide');
					},
					show:true,
					label:'DELETE'
				}
			}
		});
		$('#modalBox').modal();
	});
});

You need the following javascript codes

function isArrExist(arr, arrIndex) {
	//isArrMultiExist(v2, ['frontEndLink', 'url']))
	    var arrTemp = arr;
	    for (var i = 0; i < arrIndex.length; i++) {
	        if (arrIndex[i] in arrTemp) {
	            arrTemp = arrTemp[arrIndex[i]];
	        } else {
	            return false;
	        }
	    }
	    return true;
}


classModalBox = function (mainModal) {
    this.init(mainModal);
}
$.extend(classModalBox.prototype, {
    mainModalId: 'modalBox',
    init: function (mainModal) {
		this.mainModalId = mainModal;
		boxHtml  = '';
        if (!($('#'+this.mainModalId).length)){
        	$('body').append(boxHtml);
        }
    },
    enableFooter: function(tf){
    	if (tf==false){
    		$('.modal-footer').hide();
    	}
    	else{
    		$('.modal-footer').show();
    	}
    },
    setAttr: function(oArr){
    	$('.modal-footer').show();
    	$('#closeButtonModal').show();
    	$('#okButtonModal').show();
    	
    	if (isArrExist(oArr, ['header'])){$('#modelHeader').html(oArr.header);}
    	if (isArrExist(oArr, ['body'])){$('.modal-body p').html(oArr.body);}
    	if (isArrExist(oArr, ['footer'])){
    		if (isArrExist(oArr, ['footer','show'])){
    			if (oArr.footer.show==false){$('.modal-footer').hide();}
    		}
    		
    		if (isArrExist(oArr, ['footer','closeButton','show'])){
    			if (oArr.footer.closeButton.show==false){$('#closeButtonModal').hide();}
    		}
    		
    		if (isArrExist(oArr, ['footer','closeButton','label'])){
    			$('#closeButtonModal').html(oArr.footer.closeButton.label);
    		}
    		
    		if (isArrExist(oArr, ['footer','okButton','show'])){
    			if (oArr.footer.okButton.show==false){$('#okButtonModal').hide();}
    		}
    		
    		if (isArrExist(oArr, ['footer','okButton','label'])){
    			$('#okButtonModal').html(oArr.footer.okButton.label);
    		}
    		
    		if (isArrExist(oArr, ['footer','closeButton','onClick'])){
        		$('#closeButtonModal').unbind('click');
        		$('#closeButtonModal').bind('click', '#closeButtonModal', oArr.footer.closeButton.onClick);
    		}
    		
    		if (isArrExist(oArr, ['footer','okButton','onClick'])){
        		$('#okButtonModal').unbind('click');
        		$('#okButtonModal').bind('click', '#okButtonModal', oArr.footer.okButton.onClick);
    		}
    	}
    }
});

Tags:

Comments are closed.