我們都知道js能做出動態效果,很多功能都是需要它來完成的,本文我們就和大家分享一個js和css寫的的小功能,css和js實作彈出登入居中介面,與此同時背景色變暗淡的效果。
大家先看看效果:
點擊你建立相簿
html程式碼
建立按鈕
<li id="create"><a href="#form" rel="external nofollow" ><span>创建相册</span></a></li>
背景div與表單div
<div class="background"></div> <div id="form"> <div class="fh"> <h1 id="创建相册">创建相册</h1> <a class="close"><img src="/static/imghwm/default1.png" data-src="pics/close.png" class="lazy" / alt="js和css實作登入彈出並居中方法" ></a> </div> ... </div> css代码 .background { display: none; position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:#fff; background:-moz-radial-gradient(50% 50%, #fff, #000);/*gradient for firefox*/ background:-webkit-radial-gradient(50% 50%, #fff, #000);/*new gradient for webkit */ background:-webkit-gradient(radial, 0 50%, 0 50%, from(#fff), to(#000));/*the old grandient for webkit*/ opacity:0.5; filter:Alpha(opacity=50); } #form { display: none; position:fixed; border: 1px solid #ccc; background-color:white; top:30%; left:30%; width: auto; border-radius:15px; -moz-border-radius:15px; box-shadow:0 5px 27px rgba(0,0,0,0.3); -webkit-box-shadow:0 5px 27px rgba(0,0,0,0.3); -moz-box-shadow:0 5px 27px rgba(0,0,0,0.3); }
JavaScript程式碼
function showForm() { var create = document.getElementById("create"); var bg = document.getElementsByClassName("background")[0]; var form = document.getElementById("form"); var links = document.getElementsByClassName("close"); for(var i=0;i<links.length;i++) { links[i].onclick = function() { form.style.display = "none"; bg.style.display = "none"; } } create.onclick = function() { form.style.display = "block"; bg.style.display = "block"; }
#主要原理是改變背景div和表單div的display屬性,值為block時顯示,值為none時元素消失。和position:fixed; 是相對於目前視窗的。
以上內容就是js和css一起實現的小功能,希望能幫助大家。
相關推薦:
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
刺客信條陰影:貝殼謎語解決方案
3 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
3 週前ByDDD
節省R.E.P.O.解釋(並保存文件)
1 個月前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影 - 如何找到鐵匠,解鎖武器和裝甲定制
3 週前ByDDD

熱工具

SublimeText3漢化版
中文版,非常好用

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

Dreamweaver CS6
視覺化網頁開發工具

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

禪工作室 13.0.1
強大的PHP整合開發環境