bootstrap是个很流行的前端工具。我想做个没有遮罩的dialog，并且可拖动。如果通过jquery ui也可以生成，但是由于我同时也适用了jqueryeasyui。导致.dialog方法会优先使用easyui的实现，而easyui的dialog无疑是非常丑陋的，实在不能忍。正好，bootstrap也有dialog的功能，并且不需要通过js调用。当然，最关键是，调用的方法名是.modal 而不是.dialog()
而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 目录下可执行
