1. Subform
When designing a website, we need to design some modal subforms, such as
This step is easy to implement, just div+css is OK, please see the code:
The code copy is as follows:
<div></div>
<div>
<div>
<center>Clicking the block area can change my position</center>
</div>
</div>
The code copy is as follows:
.modal-background
{
background-color: #999999;
bottom: 0;
left: 0;
opacity: 0.3;
position: fixed;
right: 0;
top: 0;
z-index: 1100;
}
.modal-window
{
background-color: #FFFFF;
border: 1px solid #6B94AD;
box-shadow: 5px 5px 5px #6B94AD;
font-family: 'Microsoft YaHei';
font-size: 12px;
height: 120px;
left: 50%;
margin-left: -160px;
margin-top: -160px;
opacity: 1;
position: fixed;
top: 50%;
width: 320px;
z-index: 1110;
}
.modal-window .head
{
height: 25px;
color: #ffff;
font-weight: 600;
background-image: -moz-linear-gradient(top, #4A8CC5, #2963A5); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A8CC5), color-stop(1, #2963A5)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8CC5', endColorstr='#2963A5', GradientType='0'); /* IE*/ : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :
}
.modal-window .head center
{
padding-top: 2px;
}
Adding the above html and css can easily achieve the effect of the above modal form. where left: 50%;top: 50%; margin-left: -160px; margin-top: -160px; is to achieve the centering effect of this modal form.
Of course, the size of the modal form is written in the style class.modal-window. This does not mean that the size of the modal form cannot be modified. For example, if I write it like code:
The code copy is as follows:
<div></div>
<div>
<div>
<center>Clicking the block area can change my position</center>
</div>
</div>
The second line of code is appended to the .list-window style class to override the size and position in the .modal-window class, but it also ensures that the modal form is centered and displayed.
The code copy is as follows:
.list-window
{
width:600px;
height:400px;
margin-left:-300px;
margin-top:-200px;
}
As shown
It can be seen that the implementation of this step is very simple. If you master the css attributes of several key lines, you will "completely abuse" this modal subform. Various other modal subforms can be learned from one example.
2. When the mouse clicks on the head of the subform, how to drag and move the subform? After introducing jQ, we only need a few scripts to solve this small function. If you don't believe it, let's see
The code copy is as follows:
var left, top, $this;
$(document).delegate('.modal-window .head', 'mousedown', function (e) {
left = e.clientX, top = e.clientY, $this = $(this).css('cursor', 'move');
this.setCapture ? (
this.setCapture(),
this.onmousemove = function (ev) { mouseMove(ev || event); },
this.onmouseup = mouseUp
) : $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp);
});
function mouseMove(e) {
var target = $this.parents('.modal-window');
var l = Math.max((e.clientX - left + Number(target.css('margin-left').replace(/px$/, '')) || 0), -target.position(). left);
var t = Math.max((e.clientY - top + Number(target.css('margin-top').replace(/px$/, '')) || 0), -target.position(). top);
l = Math.min(l, $(window).width() - target.width() - target.position().left);
t = Math.min(t, $(window).height() - target.height() - target.position().top);
left = e.clientX;
top = e.clientY;
target.css({ 'margin-left': l, 'margin-top': t });
}
function mouseUp(e) {
var el = $this.css('cursor', 'default').get(0);
el.releaseCapture?
(
el.releaseCapture(),
el.onmousemove = el.onmouseup = null
) : $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp);
}
This code is very short and can it run smoothly in various browsers.
In fact, its implementation principle is very simple and roughly divided into three steps:
① When the mouse is under mousedown at the head of the modal form, immediately bind mousemove and mouseup events to the document.
② When the mouse does not pop up (no mouseup), if the mouse moves in the form, activate the mouseMove function and move the position of the entire form in time by calculating the distance the mouse moves.
③When the mouse is bounced up (mouseup), call the mouseUp event to unbind the mousemove event and mouseup event bound on the document.
The principle of the entire process is: when the mouse mousedown is moused down, the mouse movement event is transferred to the document, and the entire form is processed through the mouse movement event on the document.
In addition, there is a small trick in mouseMove, which is the global left. The top variable records the position of the last mouse stop, and then compares the position of the mouse with the left and top variables when moving the next time to determine how far the mouse has moved. Just move the entire modal subform in a corresponding position.
After analysis of this code, it was found that the mouse moves the form or any element on the document is quite easy.
For example, if you want to change the size of the form by dragging and dropping, we just need to adjust the size of the form in the mouseMove event handling function and it will be OK. Have you found that you have learned a lot and improved again? What about small steps?
Some people may ask what setCapture and releaseCapture do respectively? In fact, this is for IE compatibility. Only IE has these two functions. IE is despised here. setCapture allows the current element to capture all the events of the mouse. If you do not use them, it may be incompatible with IE browser.