1。サブフォーム
Webサイトを設計するときは、モーダルのサブフォームを設計する必要があります。
この手順は実装が簡単です。Div+CSSだけです。コードをご覧ください。
コードコピーは次のとおりです。
<div> </div>
<div>
<div>
<center>ブロック領域をクリックすると、私の位置が変わる可能性があります</center>
</div>
</div>
コードコピーは次のとおりです。
.Modal-Background
{
バックグラウンドカラー：＃999999;
下：0;
左：0;
不透明：0.3;
位置：修正;
右：0;
上：0;
z-index：1100;
}
.Modal-Window
{
バックグラウンドカラー：#fffff;
国境：1pxソリッド＃6b94ad;
Box-shadow：5px 5px 5px＃6b94ad;
フォントファミリー：「Microsoft Yahei」;
フォントサイズ：12px;
高さ：120px;
左：50％;
マージン左：-160px;
マージントップ：-160px;
不透明：1;
位置：修正;
トップ：50％;
幅：320px;
Z-Index：1110;
}
.modal-window .head
{
高さ：25px;
色：#ffff;
font-weight：600;
バックグラウンドイメージ：-moz-linear-gradient（top、＃4a8cc5、＃2963a5）;
バックグラウンドイメージ：-webkit-gradient（線形、左上、左下、カラーストップ（0、＃4a8cc5）、カラーストップ（1、＃2963a5）、Chrome * /
フィルター：Progid：dmimagetransform.microsoft.gradient（startcolorstr = '＃4a8cc5'、endcolorstr = '＃2963a5'、gradienttype = '0'）; ：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：:：：：：：：：：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：：：::：：：：：：：：：：：：：：：::：：：：:：：：：：：：：：：：：::：：：：：：：::：：：：：：：：：：：：：：::：：：:：：：：：：：：：：：：：::：：：：：：：：：：：：::：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：：:づことをつ回います
}
.modal-window .head Center
{
パディングトップ：2px;
}
上記のHTMLとCSSを追加すると、上記のモーダル形式の効果を簡単に実現できます。左：50％：-160px：-160px;
もちろん、モーダルフォームのサイズは、スタイルクラスで書かれています。これは、モーダルフォームのサイズを変更できないことを意味します。
コードコピーは次のとおりです。
<div> </div>
<div>
<div>
<center>ブロック領域をクリックすると、私の位置が変わる可能性があります</center>
</div>
</div>
コードの2行目は、.Modal-Windowクラスのサイズと位置をオーバーライドするために.List-Window Styleクラスに追加されますが、モーダルフォームが中央に配置されて表示されることも保証されます。
コードコピーは次のとおりです。
.list-window
{
幅：600px;
高さ：400px;
マージン左：-300px;
マージントップ：-200px;
}
示されているように
このステップの実装は、いくつかのキーラインのCSS属性をマスターすると、この1つのモーダルサブフォームを「完全に悪用」することがわかります。
2.マウスがサブフォームの頭をクリックすると、サブフォームをドラッグして移動する方法は？ JQを導入した後、この小さな機能を解決するためにいくつかのスクリプトが必要です。あなたがそれを信じないなら、見てみましょう
コードコピーは次のとおりです。
var left、top、$ this;
$（document）.Delegate（ '。Modal-Window .head'、 'Mousedown'、function（e）{
左= 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（ '。モーダルウィンドウ'）;
var l = math.max（（e.clientx -left + number（target.css（ 'margin -left'）。置換（/px $/、 ''））|| 0）、-target.position（）。左）;
var t = math.max（（e.clienty -top + number（target.css（ 'margin -top'）。置換（/px $/、 ''））|| 0）、-target.position（）。トップ）;
l = math.min（l、$（window）.width（） - target.width（） - target.position（）。左）;
t = math.min（t、$（window）.height（） - target.height（） - target.position（）。top）;
左= e.clientx;
top = e.clienty;
Target.css（{'マージン左'：l、 'マージントップ'：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）;
}
このコードは非常に短く、さまざまなブラウザでスムーズに実行できます。
実際、その実装の原則は非常にシンプルで、大まかに3つのステップに分かれています。
mouseマウスがモーダルフォームの頭のムーズダウンの下にある場合、すぐにMousemoveとMouseupイベントをドキュメントに結合します。
mouseマウスがポップアップしない場合（マウスアップなし）、マウスがフォームで移動する場合、マウス機能を作動させ、マウスが移動する距離を計算することにより、形式全体の位置を時間内に移動します。
mouseマウスが跳ね返ったら（MouseUp）、マウスアップイベントを呼び出して、ドキュメントにバインドされているMousemoveイベントとMouseUpイベントを解除します。
プロセス全体の原則は次のとおりです。マウスのムーズダウンが整理されると、マウスの動きイベントがドキュメントに転送され、フォーム全体がドキュメントのマウス運動イベントを通じて処理されます。
さらに、グローバルな変数が最後のマウス停止の位置を記録し、次回と上部変数の位置を次の時間と決定するときに比較して、Mousemoveに小さなトリックがあります。マウスがどの程度移動したか。
このコードを分析した後、マウスがフォームまたはドキュメント上の要素を移動するのは非常に簡単であることがわかりました。
たとえば、ドラッグとドロップでフォームのサイズを変更する場合は、Mousemoveイベント処理機能のフォームのサイズを調整するだけで、多くのことを学んだことがわかりました。再び改善しましたか？
一部の人々は、それぞれセットキャプチャーと解放を行うことを尋ねるかもしれませんか？実際、これはIEのみがこれらの2つの関数を持っています。 SetCaptureは、現在の要素がマウスのすべてのイベントをキャプチャできるようにします。