BootStrap Modal Create

用过bootstrap的都知道里面有个弹出层 Modal

小弟在此只是在上面封装了下，仅供交流。

首先这个modal 是依赖 bootstrap.css /js

modal.js

/**
 * Modal.js
 * @ref bootstrap.js bootstrap.css
 * @author vincent
 */
var H = (function() {
    function addPrefix(str, prefix) {
        return str ? str.split(/\s+/).map(function(t) { return prefix + t; }).join(' ') : '';
    }

    function btn(text, btnStyle, url, skipPrefix) {
        btnStyle = skipPrefix ? btnStyle : addPrefix(btnStyle, 'btn-');
        if (btnStyle) btnStyle = ' ' + btnStyle;
        var href = url ? ' href="' + url + '"' : '';
        return '' + text + '';
    }

    function icon(style, skipPrefix) {
        return style ? (' ') : '';
    }

    return {
        'btn': btn,
        'icon': icon
    };
})();
function Modal(opt){
	this.opt = opt;
	this.context = '
 '+
			    ' 
'+
			    '  	x'+
			     ' 	
'+
			    '
'+
			   ' 
'+
			   ' 
'+
			  '
' ;
}
Modal.prototype = {
	    constructor : Modal,
	    show : function(){
	    	 var ui = $(this.context);
	    	 var opt = this.opt;
	    	    opt.initView(ui);
	    	    $(document.body).append(ui);
	    	    ui.on('hidden', function() { ui.remove(); });
	    	    if ($.isFunction(opt.hidden)) {
	    	        ui.on('hidden', opt.hidden);
	    	    }
	    	    delete opt.initView;
	    	    delete opt.hidden;
	    	    return ui.modal(opt);
	    },
	 		
};

demo 调用

function showSubmitError(reason, fn) {
    new Modal({
        'backdrop': 'static',
        'initView': function(ui) {
            ui.find('.modal-header').append("Action");
            ui.find('.modal-body').html('form
 ' + reason + '
');
          //  var ok = $(' OK ');
            var  ok = $(H.btn(H.icon('ok white') + 'OK', 'primary'));
            ui.find('.modal-footer').append(ok.click(function() { ui.modal('hide'); }));
        },
        'hidden': fn
    }).show();

Ok,有兴趣的朋友可以一起交流下 。 尊重版权，希望使用的朋友请注明出处！