jquery實現(xiàn)界面點擊按鈕彈出懸浮框
更新時間：2022年03月30日 15:16:51 作者：lbb-luckly
這篇文章主要為大家詳細介紹了jquery實現(xiàn)界面點擊按鈕彈出懸浮框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)界面點擊按鈕彈出懸浮框的具體代碼，供大家參考，具體內(nèi)容如下
首先定義兩個div:
一個是背景，一個是懸浮窗。
<input id="Button1" type="button" value="點擊彈出層"/>? ? ? ? ?? ??? ?<!--彈出層時背景層DIV--> ?? ??? ?<div id="fade" class="black_overlay"></div> ?? ??? ?<!-- 編輯框 可以加自己的樣式 --> ?? ??? ?<div id="MyDiv" class="white_content"> ?? ??? ??? ?點擊陰影處退出?。。? </div>
css樣式：
<style>
?? ??? ??? ?.black_overlay {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 0%;
? ? ? ? ? ? left: 0%;
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? background-color: black;
? ? ? ? ? ? z-index: 1001;
? ? ? ? ? ? -moz-opacity: 0.8;
? ? ? ? ? ? opacity: .80;
? ? ? ? ? ? filter: alpha(opacity=80);
? ? ? ? }
? ? ? ? .white_content {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 10%;
? ? ? ? ? ? left: 10%;
? ? ? ? ? ? width: 80%;
? ? ? ? ? ? height: 80%;
? ? ? ? ? ? border: 16px solid lightblue;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? z-index: 1002;
? ? ? ? ? ? overflow: auto;
? ? ? ? }
? ? ? ? .white_content_small {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 20%;
? ? ? ? ? ? left: 30%;
? ? ? ? ? ? width: 40%;
? ? ? ? ? ? height: 50%;
? ? ? ? ? ? border: 16px solid lightblue;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? z-index: 1002;
? ? ? ? ? ? overflow: auto;
? ? ? ? }
</style>jquery方法：
<script type="text/javascript">
?? ??? ?$("#Button1").click(function() {
?? ??? ??? ?document.getElementById("MyDiv").style.display = 'block';
?? ??? ??? ?document.getElementById("fade").style.display = 'block';
?? ??? ??? ?var bgdiv = document.getElementById("fade");
?? ??? ??? ?bgdiv.style.width = document.body.scrollWidth;
?? ??? ??? ?$("#fade").height($(document).height());
?? ??? ?});
?? ??? ?//關(guān)閉彈出層
?? ??? ?$("#fade").click(function() {
?? ??? ??? ?document.getElementById("MyDiv").style.display = 'none';
?? ??? ??? ?document.getElementById("fade").style.display = 'none';
?? ??? ?});
</script>效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了jquery datatable服務(wù)端分頁，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
jquery實現(xiàn)兩個div中的元素相互拖動的方法分析
這篇文章主要介紹了jquery實現(xiàn)兩個div中的元素相互拖動的方法,結(jié)合實例形式分析了jQuery基于鼠標(biāo)事件響應(yīng)的頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2020-04-04
JQuery是一個很NB的js集成作品，以其簡潔的語法和跨平臺兼容性的優(yōu)勢，這里給大家介紹下JQuery中的選擇器，不理解選擇器或者用不好選擇器，是不可能有一手很NB的JQuery技能的2014-04-04
jQuery基礎(chǔ) -- 處理表單元素2010-02-02
使用jquery DataTable和ajax向頁面顯示數(shù)據(jù)列表的方法
今天小編就為大家分享一篇使用jquery DataTable和ajax向頁面顯示數(shù)據(jù)列表的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
基于jQuery實現(xiàn)滾動條滾動到子元素位置以此來定位滾動條位置，下面是小編給大家?guī)淼膶崿F(xiàn)代碼，代碼比較簡單，需要的朋友可以參考下2016-08-08
jquery點擊頁面任何區(qū)域?qū)崿F(xiàn)鼠標(biāo)焦點十字效果
鼠標(biāo)點擊聚焦，地圖定位，在圖片上突出顯示，焦點定位頁面元素，這些都是在系統(tǒng)開發(fā)是經(jīng)常需要用到的，下面為大家介紹下具體的實現(xiàn)，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要介紹了jquery通過closest選擇器修改上級元素的方法,實例分析了jQuery中closest選擇器的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)簡單的分頁控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法實例分析
這篇文章主要介紹了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法,結(jié)合實例形式分析了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器相關(guān)功能、原理及使用方法,需要的朋友可以參考下2019-02-02