- 浏览: 1075839 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (290)
- php (65)
- javascript (36)
- html5 (31)
- thinkphp (9)
- mysql (16)
- jquery (13)
- node.js (9)
- css (9)
- android 开发 (8)
- flex (5)
- java (3)
- apache (8)
- linux (8)
- git (5)
- web (5)
- wordpress (9)
- mongodb (2)
- redis (5)
- yaf (6)
- python (4)
- big data (1)
- sphinx (1)
- html (1)
- bootstrap (1)
- vue (1)
- laravel (1)
- test (0)
最新评论
-
July01:
推荐用StratoIO打印控件,支持网页、URL、图片、PD、 ...
如何解决非IE浏览器的web打印 -
flashbehappy:
同一个视频,有mp4,ogg两种格式的。在chrome,fir ...
firefox chrom safari 对video标签的区别 -
xmdxzyf:
可以在网站(www.sosoapi.com)上试下在线表单方式 ...
用swagger-php/ui做API测试 -
flex_莫冲:
a2631500 写道"看了源码,设置Backbon ...
backbone与php交互 -
a2631500:
"看了源码,设置Backbone.emulateJS ...
backbone与php交互
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 目录下可执行
而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)
- 下载次数: 2
发表评论
-
富文本编辑器推荐
2016-10-26 16:03 2387website: https://www.froala.com ... -
一些比较特别的js库和框架
2016-08-11 14:05 605http://www.meedee.cn/2016/06/07 ... -
Javascript的变量与delete操作符
2016-08-11 14:02 437来自:http://www.meedee.cn/2 ... -
uploadifive上傳插件的使用
2015-02-17 18:07 30791 自定義上傳錯誤/進度提示位置 'queueID':&quo ... -
json schema validate
2014-09-17 16:58 4622为了检测API返回的数据结构是否正确,刚好chrome的插件p ... -
来自yahoo的web优化规则(YSLOW的23条军规)
2014-09-11 17:53 1613https://developer.yahoo.com/per ... -
<a>的href中添加js函数的写法
2014-03-18 15:54 1218参考资料: http://www.cnblogs.com/op ... -
使用backbonejs的router功能
2014-01-02 12:13 924来源: http://css.dzone.com/articl ... -
初次seajs使用
2013-11-22 14:11 2947第一次用报了$=null的错 ... -
Javascript:history.go()和history.back()的用法和区别
2013-08-02 14:38 37534Javascript:history.go()和history ... -
JAVASCRIPT常用函数集合
2013-07-23 15:01 9291、删除数组某项 // Array Remove - By ... -
JS判断一个数组中是否有重复值的三种方法
2013-07-18 09:52 2205参考 http://superivan.iteye.com/b ... -
多DOM操作的性能优化
2013-07-15 17:32 943今天发现DOM操作很多,且是显示隐藏操作,性能是非常差的。一个 ... -
SafariJSRef safary开发指南
2013-07-10 11:30 891针对safari的js和css开发指南。 https://de ... -
js获取屏幕可视区域
2013-06-04 11:10 929IE: document.body.offsetWidth, ... -
backbone 的delegateEvent用法
2013-05-24 10:37 4626這篇文章記錄關於 Backbone delegateEvent ... -
post的数据参数内容包含&如何如何处理
2013-01-17 23:37 2454这星期测试人员提交了一个bug,表单保存的数据不完整。查了一下 ... -
javascript 同zindex的重叠div如何处理事件关系
2012-11-15 11:43 6482在一个页面中有3个独立的div,不存在嵌套层次关系。3个div ... -
jquery easyui 操作总结
2012-10-29 12:32 288091、dialog $("#dialog-form& ... -
javascript浮点运算偏差的成因及解决方法
2012-10-25 10:26 2462原文地址:http://eatpockyboy.blog.16 ...
相关推荐
Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...
使用 Bootstrap 让鼠标悬停在图片上的时候,显示遮罩特效
bootstrap 前端 div方式 实现遮罩效果 数据加载过程中禁止用户操作
代码简介:Bootstrap鼠标悬停图片遮罩特效是一款基于CSS3实现的鼠标移到图片上显示遮罩显示文字信息。
bootstrap的dialog.js、bootstrap的dialog.js、bootstrap的dialog.js
Bootstrap遮罩移动导航菜单代码是一款在Bootstrap导航菜单的基础上,当鼠标滑过导航菜单项时,可以制作出非常炫酷的遮罩层滑动效果。
* 本js只是在bootstrap3-dialog的基础上进行的2次封装, * bootstrap3-dialog已经是非常好用了,调用也非常简单。 * 详情请访问:https://github.com/nakupanda/bootstrap3-dialog, * 这是原项目地址,可以自行...
bootstrap dialog实例 bootstrap dialog实例 bootstrap dialog实例 bootstrap dialog实例
本实例参考了其他人的例子,并对alert弹框做了改进,调整位置居中 具体修改: bootstrap.min.css:....bootstrap-dialog.min.css:.bootstrap-dialog .bootstrap-dialog-message{font-size:14px;text-align: center;}
主要为大家详细介绍了Bootstrap BootstrapDialog使用的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
下面这段代码并非是Bootstrap的遮罩,只是简单版的遮罩效果,Bootstrap那个太啰嗦了。如果你钟情Bootstrap的那个遮罩,来看看这篇文章“完全版:Bootstrap弹出层遮罩”。 × 登录 是一种态度 <form class=...
Bootstrap实现鼠标滑过遮罩移动导航菜单特效源码.zip
dist目录下取相关js,css文件。使用说明可参考:https://blog.csdn.net/mezheng/article/details/84063040
一个由Start Bootstrap创建的响应式引导页面模板
startbootstrap-blog-home, Start Bootstrap 创建的博客主页的Bootstrap HTML模板 启动 Bootstrap 博客主页。博客主页是一个基本的博客主页HTML起始模板,用于 Bootstrap,由启动 Bootstrap 创建。预览 查看实时预览...
startbootstrap-shop-homepage, Start Bootstrap 创建的商店主页 Bootstrap HTML模板 启动 Bootstrap 商店首页。是一个基本的HTML在线商店主页模板,它是由启动 Bootstrap ( ) 创建的 Bootstrap 。预览 查看实时预览...
startbootstrap-landing-page, 通过启动 Bootstrap 创建的响应性Bootstrap 启动页面模板 启动 Bootstrap land目标网页是由启动 Bootstrap 创建的用于 Bootstrap的多用途目标网页模板。预览 查看实时预览状态 下载和...