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

阅读更多

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

而bootstrap的modal默认是带遮罩不可移动的，那么，怎么来自定义实现我需要的功能呢？

先上button和dialog的html
button html,点击button会打开dialog

			

				

					
						SEARCH
					
				
			

dialog html。默认是不打开的

		

			

				
					×
				
				
尋找與取代
			
			

				

					One fine body…
				
			
			

				
					Close
				
				
					Save changes
				
			
		
	

在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"

				

					
						SEARCH
					
				
			

用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