快捷導(dǎo)航

jquery實(shí)現(xiàn)界面點(diǎn)擊按鈕彈出懸浮框

更新時(shí)間：2022年03月30日 15:16:51 作者：lbb-luckly

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)界面點(diǎn)擊按鈕彈出懸浮框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)界面點(diǎn)擊按鈕彈出懸浮框的具體代碼，供大家參考，具體內(nèi)容如下

首先定義兩個(gè)div:

一個(gè)是背景，一個(gè)是懸浮窗。

<input id="Button1" type="button" value="點(diǎn)擊彈出層"/>? ? ? ?
?? ??? ?<!--彈出層時(shí)背景層DIV-->
?? ??? ?<div id="fade" class="black_overlay"></div>
?? ??? ?<!-- 編輯框 可以加自己的樣式 -->
?? ??? ?<div id="MyDiv" class="white_content">
?? ??? ??? ?點(diǎn)擊陰影處退出?。?！
</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>

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery datatable服務(wù)端分頁(yè)
這篇文章主要為大家詳細(xì)介紹了jquery datatable服務(wù)端分頁(yè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)兩個(gè)div中的元素相互拖動(dòng)的方法,結(jié)合實(shí)例形式分析了jQuery基于鼠標(biāo)事件響應(yīng)的頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-04-04
jquery選擇器使用詳解
JQuery是一個(gè)很NB的js集成作品，以其簡(jiǎn)潔的語(yǔ)法和跨平臺(tái)兼容性的優(yōu)勢(shì)，這里給大家介紹下JQuery中的選擇器，不理解選擇器或者用不好選擇器，是不可能有一手很NB的JQuery技能的
2014-04-04
jQuery 處理表單元素的代碼
jQuery基礎(chǔ) -- 處理表單元素
2010-02-02
使用jquery DataTable和ajax向頁(yè)面顯示數(shù)據(jù)列表的方法
今天小編就為大家分享一篇使用jquery DataTable和ajax向頁(yè)面顯示數(shù)據(jù)列表的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
jQuery實(shí)現(xiàn)定位滾動(dòng)條位置
基于jQuery實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到子元素位置以此來(lái)定位滾動(dòng)條位置，下面是小編給大家?guī)?lái)的實(shí)現(xiàn)代碼，代碼比較簡(jiǎn)單，需要的朋友可以參考下
2016-08-08
jquery點(diǎn)擊頁(yè)面任何區(qū)域?qū)崿F(xiàn)鼠標(biāo)焦點(diǎn)十字效果
鼠標(biāo)點(diǎn)擊聚焦，地圖定位，在圖片上突出顯示，焦點(diǎn)定位頁(yè)面元素，這些都是在系統(tǒng)開(kāi)發(fā)是經(jīng)常需要用到的，下面為大家介紹下具體的實(shí)現(xiàn)，感興趣的朋友可以參考下哈
2013-06-06
jquery通過(guò)closest選擇器修改上級(jí)元素的方法
這篇文章主要介紹了jquery通過(guò)closest選擇器修改上級(jí)元素的方法,實(shí)例分析了jQuery中closest選擇器的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
基于jquery實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)控件
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
jQuery內(nèi)容過(guò)濾選擇器與子元素過(guò)濾選擇器用法實(shí)例分析
這篇文章主要介紹了jQuery內(nèi)容過(guò)濾選擇器與子元素過(guò)濾選擇器用法,結(jié)合實(shí)例形式分析了jQuery內(nèi)容過(guò)濾選擇器與子元素過(guò)濾選擇器相關(guān)功能、原理及使用方法,需要的朋友可以參考下
2019-02-02