Bootstrap笔记（三）

★：Modal

Modal有两个地方让我不满意。

其一是那个backdrop，整个画面忽明忽暗的非常晃眼的说。特别在照明不足的房间里，搞得跟恐怖片似的。这个可以用前面的css搞定。

然后就是按钮的回调，稍显设计不足。于是自己做了个共通的对话框。主要参考并简化了网上的Bootstrap.ConfirmModal，顺便加上jQuery UI的拖动效果。

代码如下:

1. 共通的对话框html模板，隐藏在页面上。

<div class="modal hide" id="modalDiv">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		<h3>Please confirm</h3>
	</div>
	<div class="modal-body">
		<p>Body contents</p>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn pull-left" data-dismiss="modal" aria-hidden="true">Close</button>
		<a class="btn btn-primary" id="confirmYesBtn">OK</a>
	</div>
</div>

2. JS代码

dialog = function(settings) {

	var options = $.extend({
		selector : '#modalDiv',// 对话框模板选择器
		header : 'Please confirm',// 标题内容
		headerSelector : '.modal-header h3',// 标题选择器
		body : 'Body contents',// 主体内容
		bodySelector : '.modal-body p',// 主体选择器
		handleSelector : '.modal-header',// 拖动条选择器
		// 简化的OK按钮动作。
		callback : false
	}, settings);

	var modal = $(options.selector);
	$(options.headerSelector).html(options.header);
	$(options.bodySelector).html(options.body);
	modal.draggable({
		handle : options.handleSelector
	});
	var buttons = options.buttons;
	if (!buttons) {// 默认OK动作
		buttons = [ {
			selector : '#confirmYesBtn',
			click : function() {
				if (options.callback) {
					options.callback();
				}
				modal.modal('hide');
			}
		} ];
	}
	$.each(buttons, function(i, b) {
		$(b.selector, modal).off('click').click(b.click);
	});

	modal.modal('show');
	return modal;
};

3. 调用示例

dialog({
	callback : function() {
		console.log('OK is clicked.')
	},
	body : 'Test:' + new Date()
});

效果截图

 

Bootstrap笔记（二） Bootstrap笔记（四）