Bootstrap笔记(三) 博客分类: Coding bootstrap
程序员文章站
2024-03-20 18:54:46
...
★: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() });
效果截图
上一篇: python实例 实现登录注册 密码加密
推荐阅读
-
Bootstrap笔记(一) 博客分类: Coding bootstrap
-
Bootstrap笔记(三) 博客分类: Coding bootstrap
-
Oracle性能优化笔记——并行&位图索引 博客分类: Coding建议 Oracle
-
Bootstrap笔记(四) 博客分类: Coding bootstrap
-
让Bootstrap轮播插件carousel支持左右滑动手势的三种方法 博客分类: web开发
-
mini2440开发板 简介 博客分类: 学习笔记 三星Flash
-
srt学习笔记三:ffmpeg使用srs推rtmp(桌面录制) 博客分类: ffmpeg rtmp
-
spring boot开发web api应用实践(三)使用proxool连接池 博客分类: spring boot 实践笔记 spring bootproxool
-
Liferay Portal学习笔记(三):自定义页面布局Template 博客分类: Liferay学习 EXTXMLTomcatCMSHTML
-
JavaScript深入浅出学习笔记(三)—语句 博客分类: JavaScript javaScript语句