Use BOOTSTRAP to create movable dialog without mask

Bootstrap is a very popular front-end tool. I want to make a dialog without mask and draggable. It can also be generated through jquery ui, but since I also apply jqueryeasyui. As a result, the .dialog method will give priority to the implementation of easyui, and the dialog of easyui is undoubtedly very ugly and cannot be tolerated. As it happens, bootstrap also has the function of dialog, and it does not need to be called through js. Of course, the most important thing is that the method name called is .modal instead of .dialog()

, and bootstrap's modal is immovable with a mask by default. So, how can I customize the functions I need?

First go to the html button html of the button and dialog
, clicking the button will open the 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. It is not turned on by default

<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">Find and Replace</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>

Add data-backdrop="false" to the div with class="modal" and there will be no mask.

Make the dialog draggable header to move:

var searchDialog = $("#searchDialog")
searchDialog.draggable({
	      handle: ".modal-header"
	});

 
Basically completed the desired function. But there is still a problem. When the dialog is displayed, if the original page has scroll bars, after the dialog appears, the scroll bars disappear. And can't scroll down anymore. This is because boostrap adds the .modal-open style to the body.

overflow: hidden;

Just remove this style

$(document).on('shown.bs.modal', function (event) {
		if ($('.modal:visible').length) {
	    	$('body').removeClass('modal-open');
	    	$('body').css({"padding-right":"0"}); // boostrap will add this. To avoid shifting, remove it
		}
	});
	

Next, we want to realize that when the scroll bar scrolls, the dialog can always float at a certain position on the current page.
In order to generate the buffering effect, the page needs to add the special effect library 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);
		}
	}

Now, all the functions we want have been implemented, but there is a small problem. When the dialog is closed, the scroll bar of the page will scroll to the top. The code causing this problem is

$(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); // This is the button element that opens the dialog
        $this.is(':visible') && $this.trigger('focus')
      })
    })
    Plugin.call($target, option, this)
  })

Since $this.trigger('focus') is executed after closing, the focus will return to the button that opened the dialog, and this button is just at the top of the page, so the scroll bar returns to the top of the page.

https://github.com/paypal/bootstrap-accessibility-plugin#modal-dialog

See the second point of modal.

When the button is bound, the focus below will be triggered!
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown

Therefore, we only need to delete the data-target="#searchDialog" of the button html, and then open the modal with js to achieve no focus button function

// removed 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>

Open the dialog with JS.

$('#searchBtn').on('click', function () {
	  searchDialog.modal('toggle');
	})

GOOD, perfect solution.

Bootstrap reference documentation:
http://getbootstrap.com/javascript/ The

attachment is decompressed and placed in the bootstrap-3.3.7\docs\examples directory to execute