使用BOOTSTRAP创建没有遮罩的可移动dialog
2017-03-28 14:42
302 查看
bootstrap是个很流行的前端工具。我想做个没有遮罩的dialog,并且可拖动。如果通过jquery ui也可以生成,但是由于我同时也适用了jqueryeasyui。导致.dialog方法会优先使用easyui的实现,而easyui的dialog无疑是非常丑陋的,实在不能忍。正好,bootstrap也有dialog的功能,并且不需要通过js调用。当然,最关键是,调用的方法名是.modal 而不是.dialog()
而bootstrap的modal默认是带遮罩不可移动的,那么,怎么来自定义实现我需要的功能呢?
先上button和dialog的html
button html,点击button会打开dialog
dialog html。默认是不打开的
在class="modal"的div中加上data-backdrop="false"就不会有遮罩了。
使dialog可拖动header来移动:
基本完成了想要的功能了。但是还有个问题,当显示dialog时,如果原先的页面是有滚动条的,出现dialog后,滚动条不见了。而且不能向下滚动了。这是因为boostrap在body上加上了.modal-open 样式导致的。
只要将这个样式去掉就可以了
接下来,我们要实现,当滚动条滚动时,dialog能一直浮动在当前页面的某个位置。
为了生成缓冲效果,页面需要加上jquery.easing.1.3.js 这个特效库
现在,已经实现了我们想要的所有功能了,但是还有个小问题,当关闭dialog后,页面的滚动条会滚动到最上面。导致这个问题的代码是
由于关闭后执行了$this.trigger('focus'),因此焦点会回到打开dialog的按纽,而这个按纽刚好在页面顶部,因此滚动条回到了页面顶部。
https://github.com/paypal/bootstrap-accessibility-plugin#modal-dialog
见modal 第二点
当绑定了button才会触发下面的focus!
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
因此,我们只要将button html的data-target="#searchDialog" 删除掉,然后用js 打开modal就可以实现不focus button的功能了
用JS打开dialog。
GOOD,完美解决了。
bootstrap 参考文档:
http://getbootstrap.com/javascript/
附件解压后放在bootstrap-3.3.7\docs\examples 目录下可执行
modal.7z (3.7 KB)
下载次数: 0
而bootstrap的modal默认是带遮罩不可移动的,那么,怎么来自定义实现我需要的功能呢?
先上button和dialog的html
button html,点击button会打开dialog
<!--tool bar--> <div class="widget-body" id="toolbarWrapper"> <div class="well well-sm well-light"> <button class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#searchDialog"> SEARCH </button> </div> </div>
dialog html。默认是不打开的
<div class="modal modeless" id="searchDialog" style="display:none;" role="dialog" data-backdrop="false"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title">尋找與取代</h4> </div> <div class="modal-body"> <p> One fine body… </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button> <button type="button" class="btn btn-primary"> Save changes </button> </div> </div> </div>
在class="modal"的div中加上data-backdrop="false"就不会有遮罩了。
使dialog可拖动header来移动:
var searchDialog = $("#searchDialog") searchDialog.draggable({ handle: ".modal-header" });
基本完成了想要的功能了。但是还有个问题,当显示dialog时,如果原先的页面是有滚动条的,出现dialog后,滚动条不见了。而且不能向下滚动了。这是因为boostrap在body上加上了.modal-open 样式导致的。
overflow: hidden;
只要将这个样式去掉就可以了
$(document).on('shown.bs.modal', function (event) { if ($('.modal:visible').length) { $('body').removeClass('modal-open'); $('body').css({"padding-right":"0"}); // boostrap会加上这个。为了避免移位,去掉它 } });
接下来,我们要实现,当滚动条滚动时,dialog能一直浮动在当前页面的某个位置。
为了生成缓冲效果,页面需要加上jquery.easing.1.3.js 这个特效库
var $float_speed = 1500, //milliseconds $float_easing = "easeOutQuint", $menu_fade_speed = 500, // milliseconds $closed_menu_opacity = 0.75, searchDialog = $("#searchDialog"), menuPosition = searchDialog.position().top; $(window).scroll(function () { floatDialog(); }); function floatDialog(){ var scrollAmount = $(document).scrollTop(); var newPosition = menuPosition + scrollAmount; if($(window).height() < searchDialog.height()){ searchDialog.css("top", menuPosition); } else { searchDialog.stop().animate({top: newPosition}, $float_speed, $float_easing); } }
现在,已经实现了我们想要的所有功能了,但是还有个小问题,当关闭dialog后,页面的滚动条会滚动到最上面。导致这个问题的代码是
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { var $this = $(this) var href = $this.attr('href') var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7 var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) if ($this.is('a')) e.preventDefault() $target.one('show.bs.modal', function (showEvent) { if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown $target.one('hidden.bs.modal', function () { //$target 是dialog,#searchDialog console.log($this); // 这个是打开dialog的按纽元素 $this.is(':visible') && $this.trigger('focus') }) }) Plugin.call($target, option, this) })
由于关闭后执行了$this.trigger('focus'),因此焦点会回到打开dialog的按纽,而这个按纽刚好在页面顶部,因此滚动条回到了页面顶部。
https://github.com/paypal/bootstrap-accessibility-plugin#modal-dialog
见modal 第二点
当绑定了button才会触发下面的focus!
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
因此,我们只要将button html的data-target="#searchDialog" 删除掉,然后用js 打开modal就可以实现不focus button的功能了
// 删除了data-target="#searchDialog" <div class="widget-body" id="toolbarWrapper"> <div class="well well-sm well-light"> <button class="btn btn-primary btn-lg no-modal" data-toggle="modal" > SEARCH </button> </div> </div>
用JS打开dialog。
$('#searchBtn').on('click', function () { searchDialog.modal('toggle'); })
GOOD,完美解决了。
bootstrap 参考文档:
http://getbootstrap.com/javascript/
附件解压后放在bootstrap-3.3.7\docs\examples 目录下可执行
modal.7z (3.7 KB)
下载次数: 0
相关文章推荐
- MFC控件篇之利用AppWizard创建并使用ToolBar StatusBar Dialog Bar
- 使用asp.net在硬盘上写(创建)文件时,提示没有相应的权限
- 使用宿主 self host server 创建 api 服务( 如果你没有IIS ,还想用rest风格api)
- 使用宿主 self host server 创建 api 服务( 如果你没有IIS ,还想用rest风格api)
- 使用jQuery插件实现 模拟dialog的遮罩效果
- 使用Flex和Flash Builder创建员工目录移动应用实例
- 使用 金山快盘 + OneNote 创建移动笔记本
- 【技术贴】最新唯一解决:未能创建视频预览,请检查设备连接,确定没有其他应用程序或用户使用该设备
- 未能创建视频预览,请检查设备连接,确定没有应用程序或用户使用该设备
- 使用Ext中的Grid,Form,Dialog来实现列表,创建,更新,删除,查找和分页功能
- maven2创建web项目,使用eclipse没有run on server的解决方法
- 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能
- 使用onCreateDialog创建Dialog,并且动态修改Dialog的信息
- 使用 Visual Studio 2005中的ASP.NET 移动控件创建电子书浏览器应用程序
- 使用Javascript创建遮罩层并模拟Alert、Confirm对话框
- 使用 SQL Server Compact Edition 创建移动应用程序
- 使用visual studio创建web移动程序
- 使用dialog fragments方式创建Dialog
- 使用 Fries 创建性感的 Android 风格移动应用界面
- 用AppWizard创建并使用ToolBar StatusBar Dialog Bar