原生js實現的點選彈出螢幕居中對話方塊效果
在實際應用中很多有這樣的效果,就是進行某些操作之後會出現一個居中視窗,並且帶有半透明背景效果,下面就通過程式碼例項介紹一下如何實現此功能,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html, body{ height:100%; margin:0px; font-size:12px; } .mydiv{ background-color:#ff6; border:1px solid #f90; text-align:center; line-height:40px; font-size:12px; font-weight:bold; z-index:99; width:300px; height:120px; left:50%; top:50%; margin-left:-150px; margin-top:-60px; position:fixed; } .bg{ background-color:#ccc; width:100%; height:100%; left:0; top:0; filter:alpha(opacity=50); opacity:0.5; z-index:1; position:fixed; } </style> <script type="text/javascript"> function showDiv(){ document.getElementById('popDiv').style.display='block'; document.getElementById('bg').style.display='block'; } function closeDiv(){ document.getElementById('popDiv').style.display='none'; document.getElementById('bg').style.display='none'; } window.onload=function(){ var obt=document.getElementById("bt"); var oclose=document.getElementById("close"); obt.onclick=function(){ showDiv(); } oclose.onclick=function(){ closeDiv() } } </script> </head> <body> <div id="popDiv" class="mydiv" style="display:none;"> <a href="#" id="close">關閉視窗</a> </div> <div id="bg" class="bg" style="display:none;"></div> <div style="padding-top:20px;"> <input type="button" id="bt" value="點選顯示"/> </div> </body> </html>
相關文章
- Java在Swing中如何實現彈出一個對話方塊的效果?Java
- 原生js實現的核取方塊的全選和全不選效果JS
- javascript中的彈出對話方塊JavaScript
- 一個js編寫全選、彈出對話方塊、ajax-json的案例JSON
- 資料夾選擇對話方塊 JS實現(轉)JS
- TWebBrowser禁止彈出Alert對話方塊Web
- JavaScript彈出儲存對話方塊JavaScript
- Delphi中點選網頁彈出的Alert對話方塊的確定按鈕網頁
- jquery實現的彈出居中視窗效果jQuery
- Java 中彈出對話方塊的幾種方式Java
- 視窗和對話方塊居中對齊
- iOS專案開發實戰——彈出提示對話方塊iOS
- js實現checkbox核取方塊的反選效果JS
- VB.net MessageBox彈出的確認對話方塊點選確定按鈕
- 關於bootstrap彈出二級對話方塊的使用boot
- Android實現人人網點選“+”彈出效果Android
- 直播平臺原始碼,簡單實現 彈出確認 取消對話方塊原始碼
- 給應用程式加個彈出對話方塊
- JS彈出下載對話方塊以及實現常見檔案型別的下載JS型別
- Path實現常見toolbar點選彈出選單效果
- [MFC]選擇目錄對話方塊和選擇檔案對話方塊
- jQuery實現的點選彈出登陸視窗效果jQuery
- asp.net 中點選按鈕彈出模式對話方塊,選擇值後返回到頁面中(window.showModalDialog實現)ASP.NET模式
- Cocos Creator實戰-使用粒子資源實現螢幕點選效果
- 關於showModalDialog()對話方塊點選按鈕彈出新頁面的問題
- Qt標準對話方塊實現QT
- 實現對gridview刪除行時彈出確認對話方塊的一種簡單方法View
- 直播視訊app原始碼,底部彈出的列表對話方塊APP原始碼
- JS實現彈幕效果(10.11—10.17)JS
- 【Android初級】如何實現一個具有選擇功能的對話方塊效果(附原始碼)Android原始碼
- 實現qq ipad客戶端的對話方塊平滑移動的效果iPad客戶端
- CSS帶有箭頭的對話方塊效果CSS
- css實現的彈出視窗始終垂直水平居中效果CSS
- jQuery模擬實現聊天對話方塊jQuery
- SAP Spartacus 自定義Popover指令,如何實現彈出對話方塊自動關閉功能
- 如何讓win32對話方塊居中顯示Win32
- Android彈幕功能實現,模仿鬥魚直播的彈幕效果Android
- 現在有一個按鈕,點選一下就能彈出像Winform中的那另存為的對話方塊,在WebForm中應該怎麼實現ORMWeb