快捷導(dǎo)航

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

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

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

本文實例為大家分享了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>

效果圖：