使用BOOTSTRAP创建没有遮罩的可移动dialog

濮丰
2023-12-01
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 目录下可执行
 类似资料: