js 彈出層并可以拖拽

更新時間：2011年07月13日 15:55:18 作者：

彈出層，并可以拖拽，好多人要，發(fā)出來共享一下兼容IE6+, 各現(xiàn)代瀏覽器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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>  </head> <body> <div   class="ublnpf9mb"   id="overlay"></div> <div   class="ublnpf9mb"   id="win"><h2><span id="close">×</span></h2></div> <center><button>彈出層</button></center> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

彈出層

相關(guān)文章

JavaScript 使用 splice 方法刪除數(shù)組元素可能導致的問題分析
這篇文章主要介紹了JavaScript 使用 splice 方法刪除數(shù)組元素可能導致的問題分析,當在 JavaScript 中從數(shù)組中刪除元素時，使用 splice 方法時需要謹慎，本文給大家詳細講解，需要的朋友可以參考下
2023-04-04
JavaScript 實現(xiàn)網(wǎng)頁打印處理
JavaScript 實現(xiàn)網(wǎng)頁打印處理...
2007-04-04
ES11屢試不爽的新特性,你用上了幾個
這篇文章主要介紹了ES11屢試不爽的新特性,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-10-10
javascript iFrame研究
iFrame小應用
2008-12-12
JavaScript 轉(zhuǎn)義字符JSON parse錯誤研究
這篇文章主要為大家介紹了JavaScript 轉(zhuǎn)義字符JSON parse錯誤研究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
Textbox控件注冊回車事件及觸發(fā)按鈕提交事件具體實現(xiàn)
Lyncplus客戶端中訪問Web頁面時遇到了TextBox控件回車自動完成按鈕的提交事件失效的情況,于是上網(wǎng)查找相關(guān)的介紹最終解決了這兩個問題，感興趣的你可以參考下或許對你有所幫助
2013-03-03
JavaScript 裝逼指南(js另類寫法)
如何寫JavaScript才能逼格更高呢？怎樣才能、讓別人一眼看出你不簡單呢？是否很期待別人在看完你的代碼之后感嘆一句原來還可以這樣寫呢？下面列出一些在JavaScript時的裝逼技巧，也可說是非常實用的寫法
2020-05-05
在JS中判斷兩個對象是否相等方法詳解
在JavaScript中，判斷兩個對象是否相等有多種方法，取決于你對相等的定義以及對象屬性的類型，本文將介紹幾種常見的方法，感興趣的同學可以參考閱讀
2023-05-05
詳解能在多種前端框架下使用的表格控件
表格控件是我們在開發(fā)中經(jīng)常要用到的控件。有沒有能夠在多種前端控件下都能使用的表格控件？最近研究發(fā)現(xiàn)Wijmo中的FlexGrid是一款不錯的表格控件，它能支持很多主流的框架。這里主要介紹在純JavaScript和AngularJS下FlexGrid的使用。
2017-01-01
js中斷 forEach 循環(huán)的方法匯總
這篇文章主要介紹了js中斷 forEach 循環(huán)的幾種方法,主要方法還是通過其它方式代替 forEach 循環(huán)的中斷,只有方法4 使用 try-catch 結(jié)構(gòu)是實際意義上中斷 forEach 循環(huán),需要的朋友可以參考下
2023-10-10