記事特集学ぶダウンロードに質問プログラミング辞典ゲーム最近の更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

ホームページ> ウェブフロントエンド> jsチュートリアル> 本文

js 弹出层并可以拖拽_javascript技巧

WBOY

リリース： 2016-05-16 18:04:51

オリジナル

831 人が閲覧しました

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>弹出层并可拖拽</title> <style> html,body{height:100%;overflow:hidden;} body,div,h2{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} center{padding-top:10px;} button{cursor:pointer;} #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;} #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;} h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;} h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;} </style> <script> window.onload = function () { var oWin = document.getElementById("win"); var oLay = document.getElementById("overlay"); var oBtn = document.getElementsByTagName("button")[0]; var oClose = document.getElementById("close"); var oH2 = oWin.getElementsByTagName("h2")[0]; var bDrag = false; var disX = disY = 0; oBtn.onclick = function () { oLay.style.display = "block"; oWin.style.display = "block" }; oClose.onclick = function () { oLay.style.display = "none"; oWin.style.display = "none" }; oClose.onmousedown = function (event) { (event || window.event).cancelBubble = true; }; oH2.onmousedown = function (event) { var event = event || window.event; bDrag = true; disX = event.clientX - oWin.offsetLeft; disY = event.clientY - oWin.offsetTop; this.setCapture && this.setCapture(); return false }; document.onmousemove = function (event) { if (!bDrag) return; var event = event || window.event; var iL = event.clientX - disX; var iT = event.clientY - disY; var maxL = document.documentElement.clientWidth - oWin.offsetWidth; var maxT = document.documentElement.clientHeight - oWin.offsetHeight; iL = iL < 0 ? 0 : iL; iL = iL > maxL ? maxL : iL; iT = iT < 0 ? 0 : iT; iT = iT > maxT ? maxT : iT; oWin.style.marginTop = oWin.style.marginLeft = 0; oWin.style.left = iL + "px"; oWin.style.top = iT + "px"; return false }; document.onmouseup = window.onblur = oH2.onlosecapture = function () { bDrag = false; oH2.releaseCapture && oH2.releaseCapture(); }; }; </script> <div id="overlay"></div> <div id="win"><h2><span id="close">×</span></h2></div> <center><button>弹出层</button></center>

[Ctrl+A 全选注: 如需引入外部Js需刷新才能执行]

関連ラベル：

ポップアップレイヤー

ソース：php.cn

前の記事：JQuery获取当前屏幕的高度宽度的实现代码_jquery 次の記事：Jquery进度条插件 Progress Bar小问题解决_jquery

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

建玉減少の中でトンコイン価格が下落

2024-08-17 03:44:08
機関投資家は2024年第2四半期にスポットビットコインETFに47億ドルを流入

2024-08-17 03:42:08
ビットコイン（BTC）マイニング株、8月初旬に大幅下落、人工知能（AI）関連で上昇を取り戻す

2024-08-17 03:38:08
NYSEとナスダック、SECの要請を受けてビットコインとイーサETFオプションのルール変更を撤回

2024-08-17 03:31:08
ナスダックとニューヨーク証券取引所、ビットコインETFオプションの提案を撤回、しかし関心は残る

2024-08-17 03:30:08
Binance Futures が新しいプロモーションで 30,000 USDC の賞金総額を発表

2024-08-17 03:29:08
Tron エコシステムが独自のミームトークン起動パッドである SunPump を開始

2024-08-17 03:28:08
DTX Exchange (DTX) が Cardano (ADA) と Tron (TRX) を覆す

2024-08-17 03:25:08
MoonTaurus (MNTR) がミームコインセクターのトップ候補として浮上し、市場の優位性をめぐってドージコイン (DOGE) に挑戦

2024-08-17 03:24:08
ブラックロックのオンチェーン資産が上昇する中、グレースケールは熾烈な競争に直面している

2024-08-17 03:23:08

最新の問題

Selenium を使用して WindowHandles を使用してタブとウィンドウを追跡および反復する最良の方法 Internet Explorer11 の UI テストには Seleniumwebdriver を使用しています。テストされた Web アプリケーションでは、いくつかの画面がポッ...

から 2023-11-04 18:03:14

0

1

199

vue.js + typescriptでオブジェクト配列のデータを宣言する方法 vue.js3+typescript にこのコードがあります。データ内のオブジェクトの配列を宣言したいだけですが、いくつかのエラーがポップアップします

から 2023-11-02 12:50:34

解決策: Vite が /app/public/build/manifest.json パスでマニフェストファイルを見つけられない問題を修正します。ローカルでは問題なく動作しますが、ホストにデプロイするとこの問題が発生し、何を見て何をすればよいのかわかりません。助言がありますか？ありがとう

から 2023-10-29 17:01:41

0

2

296

拡張機能から Web ページの「ウィンドウ」/DOM/HTML にアクセスする Chrome 拡張機能を作成し、popup.html ファイル内のボタンをクリックするとすぐに現在の Web ページをオーバーレイしようとしています。 Popup.html から ...

から 2023-10-18 09:44:00

0

2

257

React: 検索候補ポップアップが開いたままになるユーザーが何かを入力し、その入力に基づいて入力ボックスの下に提案ポップアップが表示され、提案されたコンテンツが表示される入力ボックスを構築しようとしています。私のコードでは、候補は...

から 2023-09-16 22:22:09

0

1

249

関連トピック

詳細>

人気のおすすめ

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

私たちについて免責事項 Sitemap: PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！